WebView使用总结(应用函数与JS函数互相调用)

1.当只用WebView的时候,最先注意的当然是在配置文件中添加访问因特网的权限; 

2.如果访问的页面中有Javascript,必须设置支持Javascript:

 

Java代码

1.    webview.getSettings().setJavaScriptEnabled(true);
2.   

复制代码

3.如果希望点击链接由自己处理而不是新开Android的系统browser中响应该链接.给WebView添加一个事件监听对象(WebViewClient)并重写其中的一些方法 shouldOverrideUrlLoading对网页中超链接按钮的响应 
Java代码 

1. mWebView.setWebViewClient(new WebViewClient() {
2. /**
3. * Show in webview not system webview.
4. */
5. public boolean shouldOverrideUrlLoading(WebView view, String url) {
6.     view.loadUrl(url);
7.     return super.shouldOverrideUrlLoading(view, url);
8. }
9. }

复制代码

这样就保证了每次打开的页面都是在WebView实例中显示运行的; 

4.在显示WebView时,点击手机Back时,会完全退出当前Activity,如果想退到历史浏览页面:重写back监听: 
Java代码

1. public boolean onKeyDown(int keyCode, KeyEvent event) {
2. WebView mWebView = (WebView) findViewById(R.id.browser);
3. if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
4.      mWebView.goBack();
5.      return true;
6.   }
7. return super.onKeyDown(keyCode, event);
8. }

复制代码

5.Android SDK提供了一个schema前缀为"file:///android_asset/".WebView遇到这样的schema,就去当前包中的 assets目录中找内容.如:"file:///android_asset/demo.html" 
下面一段代码是对网页中JS的类似Alert()类的函数进行相应的重写响应: 
Java代码 

1. webView.setWebChromeClient(new WebChromeClient() {
2.                         public boolean onJsAlert(WebView view, String url, String message,
3.                                         final JsResult result) {
4.                                 AlertDialog.Builder b = new AlertDialog.Builder(BrowserJs.this);
5.                                 b.setTitle("Alert");
6.                                 b.setMessage(message);
7.                                 b.setPositiveButton(android.R.string.ok,
8.                                                 new AlertDialog.OnClickListener() {
9.                                                         public void onClick(DialogInterface dialog,
10.                                                                         int which) {
11.                                                                 result.confirm();
12.                                                         }
13.                                                 });
14.                                 b.setCancelable(false);
15.                                 b.create();
16.                                 b.show();
17.                                 return true;
18.                         };
20.                         @Override
21.                         public boolean onJsConfirm(WebView view, String url,
22.                                         String message, final JsResult result) {
23.                                 AlertDialog.Builder b = new AlertDialog.Builder(BrowserJs.this);
24.                                 b.setTitle("Confirm");
25.                                 b.setMessage(message);
26.                                 b.setPositiveButton(android.R.string.ok,
27.                                                 new AlertDialog.OnClickListener() {
28.                                                         public void onClick(DialogInterface dialog,
29.                                                                         int which) {
30.                                                                 result.confirm();
31.                                                         }
32.                                                 });
33.                                 b.setNegativeButton(android.R.string.cancel,
34.                                                 new DialogInterface.OnClickListener() {
35.                                                         public void onClick(DialogInterface dialog,
36.                                                                         int which) {
37.                                                                 result.cancel();
38.                                                         }
39.                                                 });
40.                                 b.setCancelable(false);
41.                                 b.create();
42.                                 b.show();
43.                                 return true;
44.                         };
46.                         @Override
47.                         public boolean onJsPrompt(WebView view, String url, String message,
48.                                         String defaultValue, final JsPromptResult result) {
49.                                 final LayoutInflater factory = LayoutInflater
50.                                                 .from(BrowserJs.this);
51.                                 final View v = factory.inflate(
52.                                                 R.layout.prompt_dialog, null);
53.                                 ((TextView) v.findViewById(R.id.prompt_message_text))
54.                                                 .setText(message);
55.                                 ((EditText) v.findViewById(R.id.prompt_input_field))
56.                                                 .setText(defaultValue);
58.                                 AlertDialog.Builder b = new AlertDialog.Builder(BrowserJs.this);
59.                                 b.setTitle("Prompt");
60.                                 b.setView(v);
61.                                 b.setPositiveButton(android.R.string.ok,
62.                                                 new AlertDialog.OnClickListener() {
63.                                                         public void onClick(DialogInterface dialog,
64.                                                                         int which) {
65.                                                                 String value = ((EditText) v
66.                                                                                 .findViewById(R.id.prompt_input_field))
67.                                                                                 .getText().toString();
68.                                                                 result.confirm(value);
69.                                                         }
70.                                                 });
71.                                 b.setNegativeButton(android.R.string.cancel,
72.                                                 new DialogInterface.OnClickListener() {
73.                                                         public void onClick(DialogInterface dialog,
74.                                                                         int which) {
75.                                                                 result.cancel();
76.                                                         }
77.                                                 });
78.                                 b.setOnCancelListener(new DialogInterface.OnCancelListener() {
79.                                         public void onCancel(DialogInterface dialog) {
80.                                                 result.cancel();
81.                                         }
82.                                 });
83.                                 b.show();
84.                                 return true;
85.                         };
87.                         public void onProgressChanged(WebView view, int newProgress) {
88.                                 BrowserJs.this.getWindow().setFeatureInt(
89.                                                 Window.FEATURE_PROGRESS, newProgress * 100);
90.                                 super.onProgressChanged(view, newProgress);
91.                         }
93.                         public void onReceivedTitle(WebView view, String title) {
94.                                 BrowserJs.this.setTitle(title);
95.                                 super.onReceivedTitle(view, title);
96.                         }
97.                 });
99.                 go.setOnClickListener(new OnClickListener() {
100.                         public void onClick(View view) {
101.                                 String url = text.getText().toString();
102.                                 webView.loadUrl(url);
103.                         }
104.                 });
105.                 webView.loadUrl("file:///android_asset/index.html");

复制代码

在上述代码中,用到的prompt_dialog.xml: 
Java代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.         android:gravity="center_horizontal" android:orientation="vertical"
4.         android:layout_width="fill_parent" android:layout_height="wrap_content">
5.         <TextView android:id="@+id/prompt_message_text"
6.                 android:layout_width="fill_parent" android:layout_height="wrap_content" />
7.         <EditText android:id="@+id/prompt_input_field"
8.                 android:layout_width="fill_parent" android:layout_height="wrap_content"
9.                 android:selectAllOnFocus="true" android:scrollHorizontally="true"
10.                 android:minWidth="250dp" />
11. </LinearLayout>

复制代码

还有assets中的Html文件: 
Java代码

1. <html>
2. <script type="text/javascript">
3.   function onAlert(){
4.           alert("This is a alert sample from html");
5.   }
6.   function onConfirm(){
7.           var b=confirm("are you sure to login?");
8.           alert("your choice is "+b);
9.   }
10.   function onPrompt(){
11.           var b=prompt("please input your password","aaa");
12.           alert("your input is "+b);
13.   }
14. </script>
15. <pre>
16. <input type="button" value="alert" onclick="onAlert()"/>
17. <input type="button" value="confirm" onclick="onConfirm()"/>
18. <input type="button" value="prompt" onclick="onPrompt()"/>
20. <a href="http://www.google.com"/>Google</a>
21. </pre>
22. </html>

复制代码

接着上篇: 
6.通过字符串拼凑的html页面显示: 
Java代码

1. public void simpleJsClick() {
2.                 WebView webView = (WebView) findViewById(R.id.webview);
3.                 String html = "<html>"
4.                                 + "<body>"
5.                                 + "图书封面<br>"
6.                                 + "<table width='200' border='1' >"
7.                                 + "<tr>"
8.                                 + "<td><a onclick='alert(\"Java Web开发速学宝典\")' ><img style='margin:10px' src='http://images.china-pub.com/ebook45001-50000/48015/cover.jpg' width='100'/></a></td>"
9.                                 + "<td><a onclick='alert(\"大象--Thinking in UML\")' ><img style='margin:10px' src='http://images.china-pub.com/ebook125001-130000/129881/zcover.jpg' width='100'/></td>"
10.                                 + "</tr>"
11.                                 + "<tr>"
12.                                 + "<td><img style='margin:10px' src='http://images.china-pub.com/ebook25001-30000/27518/zcover.jpg' width='100'/></td>"
13.                                 + "<td><img  style='margin:10px' src='http://images.china-pub.com/ebook30001-35000/34838/zcover.jpg' width='100'/></td>"
14.                                 + "</tr>" + "</table>" + "</body>" + "</html>";
16.                 webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);
17.                 webView.getSettings().setJavaScriptEnabled(true);
18.                 webView.setWebChromeClient(new WebChromeClient());
19.         }

复制代码

7.在同种分辨率的情况下,屏幕密度不一样的情况下,自动适配页面: 
Java代码

1. DisplayMetrics dm = getResources().getDisplayMetrics();
2.    int scale = dm.densityDpi;
3.    if (scale == 240) { // 
4.       webView.getSettings().setDefaultZoom(ZoomDensity.FAR);
5.     } else if (scale == 160) {
6.       webView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
7.     } else {
8.       webView.getSettings().setDefaultZoom(ZoomDensity.CLOSE);
9. }

复制代码

8.判断加载的页面URL地址是否正确: 
Java代码 

1.    if(URLUtil.isNetworkUrl(url)==true)

复制代码

9.设置WebView的一些缩放功能点: 
Java代码 

1. webView.getSettings().setJavaScriptEnabled(true);
2. webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
3. webView.setHorizontalScrollBarEnabled(false);
4. webView.getSettings().setSupportZoom(true);
5. webView.getSettings().setBuiltInZoomControls(true);
6. webView.setInitialScale(70);
7. webView.setHorizontalScrollbarOverlay(true);

复制代码

完成java文件: 
Java代码

1. public class MethodMutual extends Activity {
3.         private WebView mWebView;
4.         private Handler mHandler = new Handler();
5.         private static final String LOG_TAG = "WebViewDemo";
7.         /** Called when the activity is first created. */
8.         @Override
9.         public void onCreate(Bundle savedInstanceState) {
10.                 super.onCreate(savedInstanceState);
11.                 setContentView(R.layout.main);
12.                 loadAssetHtml();
13.         }
15.         public void loadAssetHtml() {
16.                 mWebView = (WebView) findViewById(R.id.webview);
17.                 WebSettings webSettings = mWebView.getSettings();
18.                 webSettings.setSavePassword(false);
19.                 webSettings.setSaveFormData(false);
20.                 webSettings.setJavaScriptEnabled(true);
21.                 webSettings.setSupportZoom(false);
22.                 mWebView.setWebChromeClient(new MyWebChromeClient());
23.                 // 将一个java对象绑定到一个javascript对象中,javascript对象名就是interfaceName,作用域是Global.
24.                 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
25.                 mWebView.loadUrl("file:///android_asset/demo.html");
26.                 // 通过应用中按钮点击触发JS函数响应
27.                 Button mCallJS = (Button) findViewById(R.id.mCallJS);
28.                 mCallJS.setOnClickListener(new OnClickListener() {
29.                         @Override
30.                         public void onClick(View v) {
31.                                 mWebView.loadUrl("javascript:wave()");
32.                         }
33.                 });
34.         }
36.         private int i = 0;
38.         final class DemoJavaScriptInterface {
39.                 DemoJavaScriptInterface() {
40.                 }
41.                 /**
42.                  * This is not called on the UI thread. Post a runnable to invoke
43.                  * loadUrl on the UI thread.
44.                  */
45.                 public void callAndroid() {
46.                         mHandler.post(new Runnable() {
47.                                 public void run() {
48.                                         if (i % 2 == 0) {
49.                                                 mWebView.loadUrl("javascript:wave()");
50.                                         } else {
51.                                                 mWebView.loadUrl("javascript:waveBack()");
52.                                         }
53.                                         i++;
54.                                 }
55.                         });
56.                 }
57.         }
59.         /**
60.          * Provides a hook for calling "alert" from javascript. Useful for debugging
61.          * your javascript.
62.          */
63.         final class MyWebChromeClient extends WebChromeClient {
64.                 @Override
65.                 public boolean onJsAlert(WebView view, String url, String message,
66.                                 JsResult result) {
67.                         Log.d(LOG_TAG, message);
68.                         result.confirm();
69.                         return true;
70.                 }
71.         }
72. }

复制代码

main.xml文件: 
Java代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.         android:orientation="vertical" android:layout_width="fill_parent"
4.         android:layout_height="fill_parent">
5.         <Button android:layout_width="wrap_content" android:text="CallJs"
6.                 android:layout_height="wrap_content" android:id="@+id/mCallJS" />
7.         <WebView android:id="@+id/webview" android:layout_width="fill_parent"
8.                 android:layout_height="fill_parent" />
9. </LinearLayout>

复制代码

demo.html: 
Java代码

1. <html>
2.         <script language="javascript">
3.             /* This function is invoked by the activity */
4.                 function wave() {
5.                     alert("1");
6.                         document.getElementById("droid").src="android_waving.png";
7.                         alert("2");
8.                 }
9.                  /* This function is invoked by the activity */
10.                 function waveBack() {
11.                     alert("1");
12.                         document.getElementById("droid").src="android_normal.png";
13.                         alert("2");
14.                 }
15.         </script>
16.         <body>
17.             <!-- Calls into the javascript interface for the activity -->
18.             <a onClick="window.demo.callAndroid()"><div style="80px;
19.                         margin:0px auto;
20.                         padding:10px;
21.                         text-align:center;
22.                         border:2px solid #202020;" >
23.                                 <img id="droid" src="android_normal.png"/><br>
24.                                 Click me!
25.                 </div></a>
26.         </body>
27. </html>

复制代码

还有用到的2张机器人图片: 

<ignore_js_op><ignore_js_op>