[Android进阶]---WebView与js交互

添加访问网络的权限

<uses-permission android:name="android.permission.INTERNET" />

通过Intent方法来访问页面：

 Uri uri = Uri.parse("http://www.baidu.com");
 Intent intent = new Intent(Intent.ACTION_VIEW, uri);
 startActivity(intent);

实现WebView控件访问本地asset的js交互

交互内容包括:

---1 android访问html的交互（不带参）

   webview.loadUrl("javascript: showFromHtml()");

---2 android访问html的交互（带参）

  webview.loadUrl("javascript: showFromHtml2('showFromHtml2 android访问html带参数')");

---3 html访问android的交互（不带参）

在js代码中:

  var str = window.jsObj.HtmlcallJava();

---4 html 访问android的交互（带参）

在js代码中:

  var str = window.jsObj.HtmlcallJava2(“可以传参”);

步骤:

第一步:将html(html文件中包括js代码)文件添加到assets目录下。

第二步:在xml文件中添加WebView控件

  

  <pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="lzl.edu.com.webviewdemo.MainActivity">

    <TextView
        android:text="WebView访问网络"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/mBtn"
        android:text="点击与js交互"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <WebView
        android:id="@+id/mWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</LinearLayout>

第三步:在activity中调用webView的相关方法与设置。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initfindViewById();
        visitHtml3();
    }

    private void visitHtml3() {
        setWebViewStyle();
        setLoadUrl(path);
    }
    private void setLoadUrl(String loadUrl) {
       webview.loadUrl(loadUrl);
    }
    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    private void setWebViewStyle() {

        webview.requestFocus();
        webview.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                MainActivity.this.setTitle("loading...");
                MainActivity.this.setProgress(newProgress);
                if(newProgress>80){
                    MainActivity.this.setTitle("JSAndroid test");
                }
            }
        });
        webview.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if(keyCode==KeyEvent.KEYCODE_BACK && webview.canGoBack()){
                    webview.goBack();
                    return true;
                }
                return false;
            }
        });
        //设置背景颜色
        webview.setBackgroundColor(Color.WHITE);
        //设置编码
        webview.getSettings().setDefaultTextEncodingName("utf-8");
        //设置js
        webview.getSettings().setJavaScriptEnabled(true);
        //设置本地调用对象及其接口
        webview.addJavascriptInterface(getHtmlObject(),"jsObj");
    }
  
    private void initfindViewById(){
        mContext = getApplicationContext();
        webview = (WebView) findViewById(R.id.mWebView);
        mBtn = (Button) findViewById(R.id.mBtn);
    }
    private Object getHtmlObject(){
        Object insertObj = new Object(){
            @JavascriptInterface
            public String HtmlcallJava(){
                return "html 访问android不带参";
            }
            @JavascriptInterface
            public String HtmlcallJava2(final String param){
                return "html 访问android带参..." + param;
            }
            @JavascriptInterface
            public void JavacallHtml(){
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //访问html中js的方法，并执行相应的操作。
                        webview.loadUrl("javascript: showFromHtml()");
                        Toast.makeText(MainActivity.this, "clickBtn", Toast.LENGTH_SHORT).show();
                    }
                });
            }
            @JavascriptInterface
            public void JavacallHtml2(){
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        webview.loadUrl("javascript: showFromHtml2('showFromHtml2 android访问html带参数')");
                        Toast.makeText(MainActivity.this, "clickBtn2", Toast.LENGTH_SHORT).show();
                    }
                });
            }
        };

        return insertObj;
    }

Index.html文件

<title>jsandroid_test</title>

<script type="text/javascript" language="javascript"> 
	
	function showHtmlcallJava(){
		var str = window.jsObj.HtmlcallJava();
		alert(str);
	}
	
	function showHtmlcallJava2(){
		var str = window.jsObj.HtmlcallJava2("可以传参");
		alert(str);
	}
	
	function showFromHtml(){
		document.getElementById("id_input").value = "android访问html:不带参";
	}
	
	function showFromHtml2( param ){
		document.getElementById("id_input2").value = "android访问html:带参..." + param;
	}
</script>


</head>


<body>

hello IT-homer

<br>
<br>
<br>

<input type="button" value="HtmlcallJava" onclick="showHtmlcallJava()" />

<br>

<input type="button" value="HtmlcallJava2" onclick="showHtmlcallJava2()" />

<br>
<br>
<br>
<br>


<input id="id_input" style="width: 90%" type="text" value="null" />
<br>
<input type="button" value="JavacallHtml" onclick="window.jsObj.JavacallHtml()" />

<br>
<br>
<br>

<input id="id_input2" style="width: 90%" type="text" value="null" />
<br>
<input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />

</body>

注意：

在4.2之后，android对javaScript多了个注释语句@JavascriptInterface

否则会控制台会报出

  E/Web Console: Uncaught TypeError: Object [object Object] has no method 'toString'