WebView用法与JS交互 

分类: Android3534人阅读评论(1)收藏举报

这篇文章讲了一些WevView的使用方法,在项目中,常常会使用到,尤其是需要与JS交互。

效果图

webview与js交互_Android

 

点击“调用alert”按钮,在Android中捕获JS alert,并用Android组件(AlertDialog)替换

webview与js交互_Android_02

 

点击“调用java方法”按钮,在JS中调用并传递参数到Java中的方法

webview与js交互_Android_03

 

点击“调JS方法”按钮(这个按钮不是html元素,而是android元素),从Java端调用html中的JS方法,并传递参数到JS方法中。

webview与js交互_Android_04

 

完整代码

在assets目录下创建一个html文件来模拟WebView访问的内容

webview与js交互_Android_05

编辑js_interact_demo.html内容如下

 

  1. <html>

  2. <head>

  3. <title>JS交互</title>

  4. <metahttp-equiv="content-type"content="text/html; charset=utf-8"/>

  5. <scripttype="text/javascript">

  6.     function invokedByJava(param) {  

  7.         document.getElementById("content").innerHTML = "Java has invoked JS function and returnd the data:"+param;  

  8.     }  

  9. </script>

  10. </head>

  11. <body>

  12. <pid="content"></p>

  13. <p>

  14. <inputtype="button"value="调用Java方法"onclick="window.stub.jsMethod('来至JS的参数');"/>

  15. <inputtype="button"value="调用alert"onclick="alert('hello')"/>

  16. </p>

  17. </body>

  18. </html>

 

 

在res/layout目录下创建web_view.xml布局文件,内容如下 

 

  1. <?xmlversion="1.0"encoding="utf-8"?>

  2. <LinearLayout

  3. xmlns:android="http://schemas.android.com/apk/res/android"

  4. android:orientation="vertical"

  5. android:layout_width="match_parent"

  6. android:layout_height="match_parent">

  7. <Buttonandroid:id="@+id/web_view_invoke_js"

  8. android:layout_width="fill_parent"

  9. android:layout_height="wrap_content"

  10. android:text="调JS方法"/>

  11. <LinearLayoutandroid:layout_width="fill_parent"

  12. android:layout_height="wrap_content">

  13. <EditTextandroid:id="@+id/web_view_text"

  14. android:layout_width="wrap_content"

  15. android:layout_height="wrap_content"

  16. android:layout_weight="1"/>

  17. <Buttonandroid:id="@+id/web_view_search"

  18. android:layout_width="wrap_content"

  19. android:layout_height="wrap_content"

  20. android:text="浏览"/>

  21. </LinearLayout>

  22. <WebViewandroid:id="@+id/web_view"

  23. android:layout_width="fill_parent"

  24. android:layout_height="fill_parent"/>

  25. </LinearLayout>


创建名为WebViewDemo的Activity文件 

 

 

  1. publicclass WebViewDemo extends Activity {  

  2. private WebView mWebView;  

  3. @Override

  4. publicvoid onCreate(Bundle savedInstanceState) {  

  5. super.onCreate(savedInstanceState);  

  6.         setContentView(R.layout.web_view);  

  7.         findViewById(R.id.web_view_invoke_js).setOnClickListener(new OnClickListener() {  

  8. @Override

  9. publicvoid onClick(View v) {  

  10. //调用JS方法,并传递参数 

  11.                 mWebView.loadUrl("invokedByJava('java_data')"< /span>);  

  12.             }  

  13.         });  

  14.         mWebView = (WebView)findViewById(R.id.web_view);  

  15.         mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);  

  16.         mWebView.getSettings().setBuiltInZoomControls(true);  

  17.         mWebView.getSettings().setJavaScriptEnabled(true);  

  18. /* 

  19.           WebView默认用系统自带浏览器处理页面跳转。

  20.                             为了让页面跳转在当前WebView中进行,重写WebViewClient。

  21.                             但是按BACK键时,不会返回跳转前的页面,而是退出本Activity。重写onKeyDown()方法来解决此问题。

  22.          */

  23.         mWebView.setWebViewClient(new WebViewClient() {  

  24. @Override

  25. publicboolean shouldOverrideUrlLoading(WebView view, String url) {  

  26.                 view.loadUrl(url);//使用当前WebView处理跳转 

  27. returntrue;//true表示此事件在此处被处理,不需要再广播 

  28.             }  

  29. @Override

  30. publicvoid onPageStarted(WebView view, String url, Bitmap favicon) {  

  31. //有页面跳转时被回调 

  32.             }  

  33. @Override

  34. publicvoid onPageFinished(WebView view, String url) {  

  35. //页面跳转结束后被回调 

  36.             }  

  37. @Override

  38. publicvoid onReceivedError(WebView view, int errorCode, String description, String failingUrl) {  

  39.                 Toast.makeText(WebViewDemo.this"Oh no! " + description, Toast.LENGTH_SHORT).show();  

  40.             }  

  41.         });  

  42. /*

  43.                             当WebView内容影响UI时调用WebChromeClient的方法

  44.          */

  45.         mWebView.setWebChromeClient(new WebChromeClient() {  

  46. /**

  47.              * 处理JavaScript Alert事件

  48.              */

  49. @Override

  50. publicboolean onJsAlert(WebView view, String url,  

  51.                     String message, final JsResult result) {  

  52. //用Android组件替换 

  53. new AlertDialog.Builder(WebViewDemo.this)  

  54.                     .setTitle("JS提示")  

  55.                     .setMessage(message)  

  56.                     .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {  

  57. publicvoid onClick(DialogInterface dialog, int which) {  

  58.                             result.confirm();  

  59.                         }  

  60.                     })  

  61.                     .setCancelable(false)  

  62.                     .create().show();  

  63. returntrue;  

  64.             }  

  65.         });  

  66. /*

  67.                           绑定Java对象到WebView,这样可以让JS与Java通信(JS访问Java方法)

  68.                           第一个参数是自定义类对象,映射成JS对象

  69.                           第二个参数是第一个参数的JS别名

  70.                           调用示例:

  71.             mWebView.loadUrl("javascript:window.stub.jsMethod('param')");

  72.          */

  73.         mWebView.addJavascriptInterface(new JsToJava(), "stub");  

  74. final EditText mEditText = (EditText)findViewById(R.id.web_view_text);  

  75.         findViewById(R.id.web_view_search).setOnClickListener(new OnClickListener() {  

  76. @Override

  77. publicvoid onClick(View view) {  

  78.                 String url = mEditText.getText().toString();  

  79. if (url == null || "".equals(url)) {  

  80.                     Toast.makeText(WebViewDemo.this"请输入URL", Toast.LENGTH_SHORT).show();  

  81.                 } else {  

  82. if (!url.startsWith("http:") && !url.startsWith("file:")) {  

  83.                         url = "http://" + url;  

  84.                     }  

  85.                     mWebView.loadUrl(url);  

  86.                 }  

  87.             }  

  88.         });  

  89. //默认页面 

  90.         mWebView.loadUrl("file:///android_asset/js_interact_demo.html");  

  91.     }  

  92. @Override

  93. publicboolean onKeyDown(int keyCode, KeyEvent event) {  

  94. //处理WebView跳转返回 

  95. if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {  

  96.             mWebView.goBack();  

  97. returntrue;  

  98.         }  

  99. returnsuper.onKeyDown(keyCode, event);  

  100.     }  

  101. privateclass JsToJava {  

  102. publicvoid jsMethod(String paramFromJS) {  

  103.             Log.i("CDH", paramFromJS);  

  104.         }  

  105.     }  

  106. }  

  107. 转自:http://blog.csdn.net/chenfeng0104/article/details/7023448