webviewphp交互并跳转,JS与移动端webview的相互交互

随着h5在移动端的普及&＃xff0c;移动端对webview的使用越来越平凡&＃xff0c;有的界面也不仅仅局限于网页的显示&＃xff0c;很多时候就要涉及到webview与Javascript代码之间的交互&＃xff0c;这对于移动端工程师和web端工程师都是一个挑战&＃xff0c;下面来总结下它们之间的交互和注意事项。

1.先说js中调用android代码&＃xff1a;下面是我写的一段简单的js代码&＃xff1a;放在了assets文件夹下了(注意若使用的是AS这个IDE&＃xff0c;assets文件夹应放在src/main目录下)

html>

function callAndroid(){

test.hello("js调用了android中的hello方法");

}

js调用android中的代码

代码非常简单&＃xff0c;页面中就一个按钮&＃xff0c;点击这个按钮调用callAndroid函数&＃xff0c;这里需注意callAndroid函数中的语句是android中对外的的一个函数&＃xff0c;在android中的代码&＃xff1a;

{

...

webSettings.setJavascriptEnabled(true);

webView.addJavascriptInterface(this, "test");//对应js中的test.xxx

webView.loadUrl("file:///android_asset/js_web.html");

}

&＃64;JavascriptInterface

public void hello(String msg){//对应js中xxx.hello("")

Log.e("webview","hello");

Toast.makeText(this,msg,Toast.LENGTH_LONG).show();

}

这里需注意的是hello函数加上注解&＃64;JavascriptInterface&＃xff0c;这样点击html中的按钮就会调用android中的hello方法了。

2.android调用js代码&＃xff1a;

js代码如下&＃xff1a;

function callJS(){

alert("android调用了js中的callJS方法");

}

android代码如下&＃xff1a;

public void click(View view){

webView.post(new Runnable() {

&＃64;Override

public void run() {

webView.loadUrl("Javascript:callJS()");

}

});

}

当android中的按钮被点击时会触发click方法&＃xff0c;然后执行webview.loadUrl("Javascript:callJS()")&＃xff0c;然后js中正好有callJS这个方法&＃xff0c;然后alert()就会被执行&＃xff0c;这里需要注意的是在android的代码中我没有直接写

webView.loadUrl("Javascript:callJS()");

而是加了一个post(new Runble)&＃xff0c;若不加的话js代码是不被调用的。

好了&＃xff0c;是不是so easy&＃xff0c;android与js的简单交互就是这样&＃xff0c;欢迎补充