Android WebView JavaScript互動

標籤：

 今天介紹一下，Android中Webview與JavaScript的互動，首先是在布局檔案裡添加webview控制項：

[html] view plaincopy 

1. <WebView  
2.         android:id="@+id/webview"  
3.         android:layout_width="fill_parent"  
4.         android:layout_height="fill_parent" />  

  然後是在manifest裡添加許可權：

[html] view plaincopy 

1. <uses-permission android:name="and  

  要是webview能夠與JavaScript互動，首先需要webview要啟用JavaScript：

[html] view plaincopy 

1. WebSettings webSettings = myWebView.getSettings();  
2.         webSettings.setJavaScriptEnabled(true);  

  然後建立JavaScript的介面：

[java] view plaincopy 

1. public class WebAppInterface {  
2.         Context mContext;  
3.   
4.         /** Instantiate the interface and set the context */  
5.         WebAppInterface(Context c) {  
6.             mContext = c;  
7.         }  
8.   
9.         /** Show a toast from the web page */  
10.         @JavascriptInterface  
11.         public void showToast(String toast) {  
12.             Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();  
13.         }  
14.     }  

  給webview添加JavaScript介面：

[html] view plaincopy 

1. myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");  

  本地JavaScript檔案：

[javascript] view plaincopy 

1. <input type="button" value="Say hello" onClick="showAndroidToast(‘Hello Android!‘)" />  
2.   
3. <script type="text/javascript">  
4.     function showAndroidToast(toast) {  
5.         Android.showToast(toast);  
6.     }  
7. </script>  

  整個代碼如下：

[java] view plaincopy 

1. public class MainActivity extends Activity {  
2.     private WebView myWebView;  
3.   
4.     @Override  
5.     protected void onCreate(Bundle savedInstanceState) {  
6.         super.onCreate(savedInstanceState);  
7.         setContentView(R.layout.activity_main);  
8.         myWebView = (WebView) findViewById(R.id.webview);  
9.         WebSettings webSettings = myWebView.getSettings();  
10.         webSettings.setJavaScriptEnabled(true);  
11.         myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");  
12.         ProcessWebString();  
13.   
14.     }  
15.   
16.     public class WebAppInterface {  
17.         Context mContext;  
18.   
19.         /** Instantiate the interface and set the context */  
20.         WebAppInterface(Context c) {  
21.             mContext = c;  
22.         }  
23.   
24.         /** Show a toast from the web page */  
25.         @JavascriptInterface  
26.         public void showToast(String toast) {  
27.             Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();  
28.         }  
29.     }  
30.   
31.     private void ProcessWebString() {  
32.         // 載入 asset 檔案  
33.         String tpl = getFromAssets("web_tpl.html");  
34.         myWebView.loadDataWithBaseURL(null, tpl, "text/html", "utf-8", null);  
35.     }  
36.   
37.     /* 
38.      * 擷取html檔案 
39.      */  
40.     public String getFromAssets(String fileName) {  
41.         try {  
42.             InputStreamReader inputReader = new InputStreamReader(  
43.                     getResources().getAssets().open(fileName));  
44.             BufferedReader bufReader = new BufferedReader(inputReader);  
45.             String line = "";  
46.             String Result = "";  
47.             while ((line = bufReader.readLine()) != null)  
48.                 Result += line;  
49.             return Result;  
50.         } catch (Exception e) {  
51.             e.printStackTrace();  
52.         }  
53.         return "";  
54.     }  
55.   
56. }  

  運行效果：

Android WebView JavaScript互動