947      阿裏雲  技術社區[雲棲]

Java加載js

Android 中可以通過webview來實現和js的交互，在程序中調用js代碼，隻需要將webview控件的支持js的屬性設置為true

Android（Java）與JavaScript（HTML）交互有四種情況：

1） Android（Java）調用HTML中js代碼

2） Android（Java）調用HTML中js代碼（帶參數）

3） HTML中js調用Android（Java）代碼

4） HTML中js調用Android（Java）代碼（帶參數）

代碼如下：

android端

MainActivity：

[java] view plaincopy

1. package com.home.jsandandroid;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.KeyEvent;  
6. import android.view.View;  
7. import android.webkit.WebChromeClient;  
8. import android.webkit.WebSettings;  
9. import android.webkit.WebView;  
10. import android.widget.Toast;  
11.   
12. public class MainActivity extends Activity {  
13.     private WebView mWebView;  
14.   
15.     @Override  
16.     protected void onCreate(Bundle savedInstanceState) {  
17.         super.onCreate(savedInstanceState);  
18.         showWebView();  
19.     }  
20.   
21.     /** 
22.      * 顯示webView並實現webView與js交互 
23.      */  
24.     private void showWebView() {  
25.         try {  
26.             mWebView = new WebView(this);  
27.             setContentView(mWebView);  
28.             mWebView.requestFocus();  
29.             mWebView.setWebChromeClient(new WebChromeClient() {  
30.                 @Override  
31.                 public void onProgressChanged(WebView view, int progress) {  
32.                     MainActivity.this.setTitle("Loading...");  
33.                     MainActivity.this.setProgress(progress);  
34.                     if (progress >= 80) {  
35.                         MainActivity.this.setTitle("JsAndroid Test");  
36.                     }  
37.                 }  
38.             });  
39.   
40.             mWebView.setOnKeyListener(new View.OnKeyListener() { // webview can  
41.                                                                     // go back  
42.                 @Override  
43.                 public boolean onKey(View v, int keyCode, KeyEvent event) {  
44.                     if (keyCode == KeyEvent.KEYCODE_BACK  
45.                             && mWebView.canGoBack()) {  
46.                         mWebView.goBack();  
47.                         return true;  
48.                     }  
49.                     return false;  
50.                 }  
51.             });  
52.   
53.             WebSettings webSettings = mWebView.getSettings();  
54.             webSettings.setJavaScriptEnabled(true);  
55.             webSettings.setDefaultTextEncodingName("utf-8");  
56.             mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");  
57.             // 此html放在assets目錄下  
58.             mWebView.loadUrl("file:///android_asset/test.html");  
59.             // 如果html直接來源於網頁上，可以使用下麵形式  
60.             // mWebView.loadUrl("https://192.168.1.121:8080/jsandroid/index.html");  
61.   
62.         } catch (Exception e) {  
63.             e.printStackTrace();  
64.         }  
65.     }  
66.   
67.     private Object getHtmlObject() {  
68.         Object insertObj = new Object() {  
69.             public String HtmlcallJava() {  
70.                 return "Html call Java";  
71.             }  
72.   
73.             public String HtmlcallJava2(final String param) {  
74.                 return "Html call Java : " + param;  
75.             }  
76.   
77.             public void JavacallHtml() {  
78.                 runOnUiThread(new Runnable() {  
79.                     @Override  
80.                     public void run() {  
81.                         mWebView.loadUrl("javascript: showFromHtml()");  
82.                         Toast.makeText(MainActivity.this, "clickBtn",  
83.                                 Toast.LENGTH_SHORT).show();  
84.                     }  
85.                 });  
86.             }  
87.   
88.             public void JavacallHtml2() {  
89.                 runOnUiThread(new Runnable() {  
90.                     @Override  
91.                     public void run() {  
92.                         mWebView.loadUrl("javascript: showFromHtml2('IT-homer blog')");  
93.                         Toast.makeText(MainActivity.this, "clickBtn2",  
94.                                 Toast.LENGTH_SHORT).show();  
95.                     }  
96.                 });  
97.             }  
98.         };  
99.   
100.         return insertObj;  
101.     }  
102. }  

js（HTML）：

[html] view plaincopy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <!-- saved from url=(0032)https://localhost:8080/jsandroid/ -->  
3. <html xmlns="https://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
4.   
5. <meta http-equiv="Expires" content="0">  
6. <meta http-equiv="Pragma" content="no-cache">  
7. <meta http-equiv="Cache-Control" content="no-store,no-cache">   
8. <meta name="Handheldfriendly" content="true">  
9. <meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes">  
10. <meta name="robots" content="all">  
11. <meta name="keywords" contect="doodle, mobile, doodlemobile, game, games">  
12. <meta name="description" content="Make People's Mobile Life More Connected Through Games.">  
13.   
14. <title>jsandroid_test</title>  
15.   
16. <script type="text/javascript" language="javascript">   
17.       
18.     function showHtmlcallJava(){  
19.         var str = window.jsObj.HtmlcallJava();  
20.         alert(str);  
21.     }  
22.       
23.     function showHtmlcallJava2(){  
24.         var str = window.jsObj.HtmlcallJava2("IT-homer blog");  
25.         alert(str);  
26.     }  
27.       
28.     function showFromHtml(){  
29.         document.getElementById("id_input").value = "Java call Html";  
30.     }  
31.       
32.     function showFromHtml2( param ){  
33.         document.getElementById("id_input2").value = "Java call Html : " + param;   
34.     }  
35. </script>  
36. </head>  
37.   
38.   
39. <body>  
40.   
41. hello IT-homer  
42.   
43. <br>  
44. <br>  
45. <br>  
46.   
47. <input type="button" value="HtmlcallJava" onclick="showHtmlcallJava()" />  
48. <br>  
49. <input type="button" value="HtmlcallJava2" onclick="showHtmlcallJava2()" />  
50.   
51. <br>  
52. <br>  
53. <br>  
54. <br>  
55.   
56. <input id="id_input" style="width: 90%" type="text" value="null" />  
57. <br>  
58. <input type="button" value="JavacallHtml" onclick="window.jsObj.JavacallHtml()" />  
59.   
60. <br>  
61. <br>  
62. <br>  
63.   
64. <input id="id_input2" style="width: 90%" type="text" value="null" />  
65. <br>  
66. <input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />  
67.   
68. </body>  
69. </html>  

代碼解析：

（1） 允許Android執行js腳本設置

Android（Java）與js（HTML）交互的接口函數是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");     // jsObj 為橋連對象

Android容許執行js腳本需要設置： webSettings.setJavaScriptEnabled(true);

（2） js（HTML）訪問Android（Java）代碼

js（HTML）訪問Android（Java）端代碼是通過jsObj對象實現的，調用jsObj對象中的函數，如： window.jsObj.HtmlcallJava()

（3） Android（Java）訪問js（HTML）代碼

Android（Java）訪問js（HTML）端代碼是通過loadUrl函數實現的，訪問格式如：mWebView.loadUrl("javascript: showFromHtml()");

說明：

1） Android訪問url網址，需在AndroidManifest.xml文件，配置容許訪問網絡的權限：
<uses-permission android:name="android.permission.INTERNET" />

2） Android（Java）調用js（HTML）時，使用的mWebView.loadUrl("javascript: showFromHtml()");函數需在UI線程運行，因為mWebView為UI控件

[java] view plaincopy

1. public void JavacallHtml(){  
2.     runOnUiThread(new Runnable() {  
3.         @Override  
4.         public void run() {  
5.             mWebView.loadUrl("javascript: showFromHtml()");  
6.             Toast.makeText(JSAndroidActivity.this, "clickBtn", Toast.LENGTH_SHORT).show();  
7.         }  
8.     });  
9. } 
   

最後更新：2017-04-03 12:54:50

  上一篇： C#之委托（函數參數傳遞）

  下一篇： xmpp即時通訊二