WebView使用总结(应用函数与JS函数互相调用) 对网页中JS的类似Alert

本帖最后由 yukong 于 2011-11-22 19:25 编辑

1.当只用WebView的时候,最先注意的当然是在配置文件中添加访问因特网的权限;
<uses-permission android:name="android.permission.INTERNET" />

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

复制代码

这样就保证了每次打开的页面都是在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. }
   
9. 
   

复制代码

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

BrowserJs 是当前Activity类的名字

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.                         };
    
19. 
    
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.                         };
    
45. 
    
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);
    
57. 
    
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.                         };
    
86. 
    
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.                         }
    
92. 
    
93.                         public void onReceivedTitle(WebView view, String title) {
    
94.                                 BrowserJs.this.setTitle(title);
    
95.                                 super.onReceivedTitle(view, title);
    
96.                         }
    
97.                 });
    
98. 
    
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");
     
106. 
     

复制代码

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

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas./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>
    
12. 
    

复制代码

还有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()"/>
    
19. 
    
20. <a href="http://www.google.com"/>Google</a>
    
21. </pre>
    
22. </html>
    
23. 
    

复制代码

接着上篇:
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开发速学宝典\")' > </a></td>"
   
9.                                 + "<td><a onclick='alert(\"大象--Thinking in UML\")' > </td>"
   
10.                                 + "</tr>"
    
11.                                 + "<tr>"
    
12.                                 + "<td> </td>"
    
13.                                 + "<td> </td>"
    
14.                                 + "</tr>" + "</table>" + "</body>" + "</html>";
    
15. 
    
16.                 webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);
    
17.                 webView.getSettings().setJavaScriptEnabled(true);
    
18.                 webView.setWebChromeClient(new WebChromeClient());
    
19.         }
    
20. 
    

复制代码

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

复制代码

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

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

复制代码

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);
   
8. 
   

复制代码

完成java文件:
Java代码

1. public class MethodMutual extends Activity {
   
2. 
   
3.         private WebView mWebView;
   
4.         private Handler mHandler = new Handler();
   
5.         private static final String LOG_TAG = "WebViewDemo";
   
6. 
   
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.         }
    
14. 
    
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.         }
    
35. 
    
36.         private int i = 0;
    
37. 
    
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.         }
    
58. 
    
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. }
    
73. 
    

复制代码

main.xml文件:
Java代码

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas./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>
   
10. 
    

复制代码

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="width:80px;
    
19.                         margin:0px auto;
    
20.                         padding:10px;
    
21.                         text-align:center;
    
22.                         border:2px solid #202020;" >
    
23.                                 <br>
    
24.                                 Click me!
    
25.                 </div></a>
    
26.         </body>
    
27. </html>
    
28. 
    

复制代码

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