Android WebView JavaScript交互

 今天介绍一下，Android中Webview与JavaScript的交互，首先是在布局文件里添加webview控件：

[html] view plain copy print ?

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

<WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

  然后是在manifest里添加权限：

[html] view plain copy print ?

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

<uses-permission android:name="and

  要是webview能够与JavaScript交互，首先需要webview要启用JavaScript：

[html] view plain copy print ?

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

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

  然后创建JavaScript的接口：

[java] view plain copy print ?

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.     }  

public class WebAppInterface {
		Context mContext;

		/** Instantiate the interface and set the context */
		WebAppInterface(Context c) {
			mContext = c;
		}

		/** Show a toast from the web page */
		@JavascriptInterface
		public void showToast(String toast) {
			Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
		}
	}

  给webview添加JavaScript接口：

[html] view plain copy print ?

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

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

  本地JavaScript文件：

[javascript] view plain copy print ?

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>  

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

  整个代码如下：

[java] view plain copy print ?

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. }  

public class MainActivity extends Activity {
	private WebView myWebView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		myWebView = (WebView) findViewById(R.id.webview);
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
		ProcessWebString();

	}

	public class WebAppInterface {
		Context mContext;

		/** Instantiate the interface and set the context */
		WebAppInterface(Context c) {
			mContext = c;
		}

		/** Show a toast from the web page */
		@JavascriptInterface
		public void showToast(String toast) {
			Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
		}
	}

	private void ProcessWebString() {
		// 加载 asset 文件
		String tpl = getFromAssets("web_tpl.html");
		myWebView.loadDataWithBaseURL(null, tpl, "text/html", "utf-8", null);
	}

	/*
	 * 获取html文件
	 */
	public String getFromAssets(String fileName) {
		try {
			InputStreamReader inputReader = new InputStreamReader(
					getResources().getAssets().open(fileName));
			BufferedReader bufReader = new BufferedReader(inputReader);
			String line = "";
			String Result = "";
			while ((line = bufReader.readLine()) != null)
				Result += line;
			return Result;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "";
	}

}

  运行效果：

原文来源：http://blog.csdn.net/phj_981805903/article/details/12573735