WebView 的使用以及 Android 与 Js 的交互

草结其籽风摇叶
2,077 阅读3分钟
原文链接： blog.csdn.net

WebView的官方文档地址：developer.android.com/reference/a…

1.WebView基础使用

1.想要使用WebView，需要在中添加权限：

2.我们可以在xml文件中使用控件，也可以在我们自己的activity中直接创建 
 WebView webview = new WebView(this);
 setContentView(webview);
3.我们想要根据WebView来做一些自己的操作，一般通过两个事件来处理，分别是WebViewClient和WebChromeClient。

(1).WebChromeClient主要可以监听进度条的改变，或者alert的显示；相关方法查看文档（developer.android.com/reference/a…）

(2).WebViewClient可以提供页面加载各个阶段的回调，包括onPageStarted()和onPageFinished()等方法，也可以调用shouldOverrideUrlloading()来拦截url。相关方法查看文档（developer.android.com/reference/a…）

4.我们想要实现android和js的交互，必须获得一个WebSettings对象，调用setJavaScriptEnabled()方法，

webview.getSettings().setJavaScriptEnabled(true);
5.加载网页调用loadUrl(str)方法 
 webview.loadUrl("http://developer.android.com/");
可以传入一个网络地址，也可以传入一个本地的html资源文件。

2.Android调用Js

只需要在loadUrl里面的参数格式为“javascript:方法名()”，例如，html中有一个方法名叫做javaCallJs()，在android中调用这个方法的代码如下：

mWebView.loadUrl("javascript:javaCallJs()");
实现如下效果：


JavaCallJsActivity.java

package com.example.android_js;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;

/**
 * Created by jian on 2016/10/31.
 */
public class JavaCallJsActivity extends Activity {

    private Button btn1, btn2, btn3;
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_javacalljs1);

        initView();

        // 设置webview的javascript可用
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 加载html，可网络，可本地
        mWebView.loadUrl("file:///android_asset/JavaCallJs.html");
        // 不加下面这句话，是无法调起alert的
        mWebView.setWebChromeClient(new WebChromeClient());
    }

    private void initView() {
        btn1 = (Button) findViewById(R.id.java_call_js1_btn1);
        btn2 = (Button) findViewById(R.id.java_call_js1_btn2);
        btn3 = (Button) findViewById(R.id.java_call_js1_btn3);
        mWebView = (WebView) findViewById(R.id.java_call_js1_webview);

        btn1.setOnClickListener(mOnClickListener);
        btn2.setOnClickListener(mOnClickListener);
        btn3.setOnClickListener(mOnClickListener);
    }

    View.OnClickListener mOnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.java_call_js1_btn1:
                    mWebView.loadUrl("javascript:javaCallJsNoArgs()");
                    break;
                case R.id.java_call_js1_btn2:
                    mWebView.loadUrl("javascript:javaCallJsExistArgs('我是聂建')");
                    break;
                case R.id.java_call_js1_btn3:
                    mWebView.loadUrl("javascript:showAlert('出现了alert！')");
                    break;
            }
        }
    };

}
activity_javacalljs1.xml
JavaCallJs.html 



	
		
		Java调用JavaScript
		
			#javacalljs1,
			#javacalljs2 {
				color: red;
			}
		
		
	

	
		这是NieJian写的Java调用Js的验证页面！

 点击按钮：“java调用js无参方法”。会出现以下内容：
		

		


 点击按钮：“java调用js有参方法”。会出现以下内容：

3.Js调用Android

Js调用Android，首先要在android代码中注册一个对象，调用如下方法：

void addJavascriptInterface (Object object,String name)
Object: the Java object to inject into this WebView's JavaScript context. Null values are ignored.
String: the name used to expose the object in JavaScript
这个方法是将object这个java对象注入到webview中，然后在webview中通过name这个字段来唯一标识调用object这个java对象中的方法。 
 For applications targeted to API level JELLY_BEAN_MR1 and above, only public methods that are annotated with 
JavascriptInterface can be accessed from JavaScript. For applications targeted to API level JELLY_BEAN or below, 
all public methods (including the inherited ones) can be accessed
根据文档介绍，API17开始，就必须添加 @JavascriptInterface 注解，，而且方法必须是public修饰，否则，不生效，API16及以下的public方法可以不添加注解。 
class JsObject {
    @JavascriptInterface
    public String toString() { return "injectedObject"; }
 }
 webView.addJavascriptInterface(new JsObject(), "injectedObject");
 webView.loadData("", "text/html", null);
 webView.loadUrl("javascript:alert(injectedObject.toString())");
下面是一个小案例，实现效果如下：

JsCallJavaActivity.java

package com.example.android_js;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;

/**
 * Created by jian on 2016/10/31.
 */
public class JsCallJavaActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_javacalljs2);

        initWebView();
    }

    private void initWebView() {
        mWebView = (WebView) findViewById(R.id.java_call_js2_webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("utf-8");

        // 添加一个对象，让js对象可以访问该对象的方法
        mWebView.addJavascriptInterface(new MyObject(), "niejian_android");
        mWebView.loadUrl("file:///android_asset/JsCallJava.html");
    }

    class MyObject {
        /**
         * API 17必须添加 @JavascriptInterface注解，否则会导致反射失败，调用无效
         */
        @JavascriptInterface
        public void javaCallJsMethod1() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:javaCallJsNoArgs()");
                }
            });
        }

        @JavascriptInterface
        public void javaCallJsMethod2() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:javaCallJsExistArgs('我是聂建')");
                }
            });
        }
    }
}
JsCallJava.html 



	
		
		JavaScript调用Java
		
			#content1,
			#content2 {
				color: red;
			}
		
		
	

	
		这是NieJian写的Java调用Js的验证页面2！



源码下载

github.com/NieJianJian…

avatar
文章
阅读
粉丝