티스토리 뷰

안드로이드

[안드로이드] WebView를 이용한 간단한 Javascript 통신

머어하지 2018. 7. 4. 23:51

안드로이드 WebView를 이용해서 간단하게 Javascript 통신을 해보겠습니다. 준비물은 WebView 입니다! 앞으로는 Kotlin(코틀린)과 Java 코드를 함께 알아보겠습니다. 우선 Naver같은 페이지를 불러오는 것이아닌 자체 html과 간단한 javascript 파일을 준비하도록 하겠습니다. 아래와 같은 코드를 사용하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script type="text/javascript" src="exam_script.js"></script>
</head>
<body>
안녕하세요 웹뷰 로딩 완료 했습니다!!!!
</body>
</html>
cs


html에 javascript 파일을 불러오고 있습니다. 다음으로 javascript 파일을 보겠습니다.

1
2
3
4
5
6
7
8
9
var exam_script = {
    plus_num: function(num){
        try{
            window.java.getNum(num+num);
        }catch(err){
            console.log(">> [exam_script.plus_num()] " + err);
        }
    }
}
cs

Android로 부터 숫자를 받고 그 숫자를 더하여 다시돌려주는 예제입니다. 이제 layout에 webview가 있다는 가정하에 시작하겠습니다.(WebView의 Id는 webView 입니다.) 시작하기전에 만든 html 파일과 js 파일은 다음과 같이 assets 폴더를 생성후 넣어줍니다.

assets 폴더 만들기


만들어진 assets 폴더에 html과 js 파일을 넣어주고 이제 Java 부터 시작을 해보겠습니다.

Java에서 사용

18 ~ 20 줄
WebView의 Setting을 가져와 javascript의 사용을 true로 바꿔줍니다. 이후 javascript에서 android의 method를 사용하기 위해서 class와 그 class를 사용할 이름을 "java"로 지정해줍니다. 
이 Class는 30 줄 이후에 작성되어 있습니다. javascript와의 연동을 위해 사용된 메소드는 API 18이후로 반드시  @JavascriptInterface 어노테이션을 붙여주어야 합니다. textview를 변경하기 위해서 runOnUiThead를 통해서 바꿔주었습니다.
마지막으로 assets 폴더에있던 exam.html 파일을 불러와줍니다. 이제 javascript의 plus_num 함수를 사용해보겠습니다.

25 줄
EditText를 통해 숫자를 입력하고 버튼을 누르면 webView의 loadUrl을 통해 javascript:(javascript이름명).(함수) 을 호출하여 줍니다. 이때 처음 불러오는 html에서 바로 script를 작성하였다면 javascript 이름명은 제외해주셔도됩니다. -> 이름명을 통해 다양한 script를 불러왔을 때, 구별하여 사용이 가능해 집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
public class WebViewActivityJava extends AppCompatActivity {
    Handler handler = new Handler();
    WebView webView;
    EditText editText;
    TextView textView;
    Button button;
    Context context;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        webView = findViewById(R.id.webView);
        editText = findViewById(R.id.edit_num);
        button = findViewById(R.id.send_button);
        textView = findViewById(R.id.web_text);
        context = this;
 
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebBridge(),"java");
        webView.loadUrl("file:///android_asset/exam.html");
 
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webView.loadUrl("javascript:exam_script.plus_num("+editText.getText()+")");
            }
        });
    }
 
    class WebBridge{
        @JavascriptInterface
        public void getNum(final int num){
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(context,"계산 결과는 "+num+"입니다.",Toast.LENGTH_LONG).show();
                    textView.setText("Java :::: "+num);
                }
            });
        }
    }
}
 
cs

그럼 다음으로 코틀린 코드를 살펴보겠습니다.
Kotlin에서 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class WebViewActivityKotlin : AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)
 
        webView.settings.javaScriptEnabled = true
        webView.addJavascriptInterface(WebBrideg(),"java")
        webView.loadUrl("file:///android_asset/exam.html")
 
        textView = web_text
        context = this
        send_button.setOnClickListener {
            webView.loadUrl("javascript:exam_script.plus_num(" + edit_num.text + ")")
        }
    }
 
    class WebBrideg{
        @JavascriptInterface
        fun getNum(num : Int){
            handler?.post {
                    Toast.makeText(context,"계산 결과는 $num 입니다.",Toast.LENGTH_SHORT).show()
                    textView!!.text = "Kotlin :::: $num"
            }
        }
    }
 
    companion object {
        var textView : TextView? = null
        var context : Context? = null
        var handler : Handler? = Handler()
    }
}
cs

간단한 java와 kotlin으로 작성된 예제로 webView와 javascript의 통신을 해보았습니다. 실행결과는 다음과 같습니다.

               






'안드로이드' 카테고리의 다른 글

[안드로이드] 안드로이드 Activity 생명주기  (0) 2018.07.09
[안드로이드] Java와 Kotlin의 간단한 비교  (1) 2018.07.07
[안드로이드] MQTT를 이용한 채팅서비스 만들기(3)  (16) 2018.05.02
[안드로이드] MQTT를 이용한 채팅서비스 만들기(2)  (10) 2018.05.01
[안드로이드] MQTT를 이용한 채팅서비스 만들기(1)  (0) 2018.04.24
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday