Android和H5之间的交互

来源：互联网发布：2017淘宝法律法规纳税编辑：程序博客网时间：2024/05/18 20:09

1.设置允许执⾏JS脚本：webSettings.setJavaScriptEnabled(true);

2.添加通信接⼜
webView.addJavascriptInterface(Interface,"InterfaceName")
3. JS调Android
InterfaceName.MethodName
4. Android调JS无返回值的

webView.loadUrl("javascript:functionName()");

5.Android调JS有返回值的

webView.evaluateJavascript("sum(" + a + "," + b + ")", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e("tag", "value=" + value);
}
});

HTML中代码

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
function sum2(a){
document.getElementById("qq").innerHTML=a;
}
</script>
</head>
<body>
<button onclick="s()">js调用安卓本地方法</button>
<a href="file:///android_asset/test2.html">点击</a>
<p id="p"></p>
<p id="qq"></p>
</body>
</html>

Android 中代码

[java] view plain copy

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.wb);
findViewById(R.id.btn).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
test();
}
});
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
//js调用安卓中的方法
mWebView.addJavascriptInterface(new JsInteration(), "myandroid");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this, SecondActivity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
public class JsInteration {
//js调用安卓中的方法
@JavascriptInterface
public String testback() {
return "hello world";
}
}
public void test() {
int a = 2;
int b = 2;
// Android调用有返回值js方法
mWebView.evaluateJavascript("sum(" + a + "," + b + ")", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e("tag", "value=" + value);
}
});
//Android调用无返回值js方法
mWebView.loadUrl("javascript:showDetail(" + a + ")");
}
}

以下他人总结

Android和H5之间的交互

hybrid App开发也不是什么新鲜事了，其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的？

1、webView加载页面

我们都知道在Android中是通过webView来加载html页面的，根据HTML文件所在的位置不同写法也不同：

//例如：加载assets文件夹下的test.html页面mWebView.loadUrl("file:///android_asset/test.html")//例如：加载网页mWebView.loadUrl("http://www.baidu.com")

如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时，页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话，那么就得设置setWebViewClient：

mWebView.setWebViewClient(new WebViewClient() {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {                mWebView.loadUrl(url);                return true;            }        }    });

2、Android本地通过Java调用HTML页面中的JavaScript方法

想要调用js方法那么就必须让webView支持

    WebSettings webSettings = mWebView.getSettings();    //设置为可调用js方法    webSettings.setJavaScriptEnabled(true);

若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值时我们可以调用mWebView.evaluateJavascript()方法：

 mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {        @Override        public void onReceiveValue(String value) {            Log.e(TAG, "onReceiveValue value=" + value);        }    });

js代码如下：

<script type="text/javascript">    function sum(a,b){    return a+b;    }    function do(){    document.getElementById("p").innerHTML="hello world";    }</script>

2、js调用Android本地Java方法

在Android4.2以上可以直接使用@JavascriptInterface注解来声明，下面是在一个本地Java方法

 public class JsInteration {    @JavascriptInterface    public String back() {        return "hello world";    }}

定义完这个方法后再调用mWebView.addJavascriptInterface()方法：

 mWebView.addJavascriptInterface(new JsInteration(), "android");

那么在js中怎么来调用呢？

<script type="text/javascript">     function s(){     //调用Java的back()方法    var result =window.android.back();    document.getElementById("p").innerHTML=result;    }</script>

4、拦截HTML页面中的点击事件

mWebView.setWebViewClient(new WebViewClient() {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            //判断url拦截事件            if (url.equals("file:///android_asset/test2.html")) {                Log.e(TAG, "shouldOverrideUrlLoading: " + url);                startActivity(new Intent(MainActivity.this,Main2Activity.class));                return true;            } else {                mWebView.loadUrl(url);                return false;            }        }    });

以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码：

mainActivity

public class MainActivity extends AppCompatActivity {public static final String TAG = "MainActivity";private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    mWebView = (WebView) findViewById(R.id.webView);    mWebView.loadUrl("file:///android_asset/test.html");    WebSettings webSettings = mWebView.getSettings();    webSettings.setJavaScriptEnabled(true);    mWebView.addJavascriptInterface(new JsInteration(), "android");    mWebView.setWebViewClient(new WebViewClient() {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            if (url.equals("file:///android_asset/test2.html")) {                Log.e(TAG, "shouldOverrideUrlLoading: " + url);                startActivity(new Intent(MainActivity.this,Main2Activity.class));                return true;            } else {                mWebView.loadUrl(url);                return false;            }        }    });}//Android调用有返回值js方法@TargetApi(Build.VERSION_CODES.KITKAT)public void onClick(View v) {    mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {        @Override        public void onReceiveValue(String value) {            Log.e(TAG, "onReceiveValue value=" + value);        }    });}public class JsInteration {    @JavascriptInterface    public String back() {        return "hello world";    }}}

test.html

<!DOCTYPE html><html><head><title></title><script type="text/javascript">    function sum(a,b){    return a+b;    }     function s(){    var result =window.android.back();    document.getElementById("p").innerHTML=result;    }    </script></head><body><button onclick="s()">调用本地方法</button><a href="file:///android_asset/test2.html">点击</a><p id="p"></p></body></html>

阅读全文

0 0