android vebview与js交互 webview与网页交互

安卓webview有时候需要动态的控制要显示的界面，比如控制网页中某个组件的大小。（个人很不推荐这样使用，因为这样的写法会使代码杂乱难于读懂。而且跨语言交互有时候会有一些莫名其妙的问题）。但是没办法，项目中需要。

下面就介绍一下webview与js交互的步骤以及注意点。

首先布局文件不多说，一个webview，一个按钮就可以。

<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:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity" >

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInfoToJs"
android:text="Java调用JS" />

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

接下来是类的内容

public class MainActivity extends Activity {
private WebView webView;
private boolean flag = false;
ImageView image;

//如果要webview控制js的话，这句话一定要有。可以写在方法上面，也可以写在oncreate上面
@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.aa);
<span style="white-space:pre">	</span>/实例化webview
webView = (WebView) findViewById(R.id.webView);
webView.setVerticalScrollbarOverlay(true);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);

<span style="white-space:pre">	</span>//将页面放入资源文件的asset目录下，也可以是网络上的页面。这里的真实页面地址其实是file:///android_asset/stream-example.html，后面的为参数，稍后会详解。
String url = "file:///android_asset/stream-example.html?w=400&h=400&t=1&u=ws://103.38.28.58:";
webView.loadUrl(url);
//添加客户端支持
webView.setWebChromeClient(new WebChromeClient());
}

//在java中调用js代码
public void sendInfoToJs(View view) {
String a = "play";
//调用js中的函数：control(msg)
webView.loadUrl("javascript:control('" + a + "')");
}
}

此类其实也非常简单，实例化webview，设置js支持。然后通过loadUrl方法加载网页。sendInfoToJs是在xml的button上绑定的方法，他里面的内容是给js传递一个"play"的字符串。同样是通过webview调用loadUrl方法，但是里面的url要写成"javascript:control(play)" control为js中的一个方法，play是我要传递的字符串。

接下来是html文件中的方法

function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
var canvas = document.getElementById('videoCanvas');
canvas.style.width = GetQueryString('w')+'px';
canvas.style.height = GetQueryString('h')+'px';

我这里是创建一个画布，动态的给画布设置宽高，这个是要再画布创建之前就要给他传入宽高的值，所有就必须在url中给他传递过去。getQueryString方法就是获取对应参数的对应的值，然后给画布的宽高赋值。这是webview给js传递值得一种方法。

另一个方法就是java调用js中方法

function control(command){
alert(command);
}
方法很简单，就是将java代码传递的参数打印出来。注意：java代码中调用的方法必须和此方法名一致。

接下来是js调用安卓方法，在html中定义一个a标签，onclick方法中写入window.my.sendToAndroid();

<a onClick="window.my.clickOnAndroid()">

下面是java对应的代码

final class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
Log.i("aaaa", "create DemoJavaScriptInterface");
}

/**
* This is not called on the UI thread. Post a runnable to invoke
* loadUrl on the UI thread.
*/
public void sendToAndroid() {
//do something
}
}

然后在需要执行的地方调用

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "my");

其中my要与window.my.sendToAndroid();中的my对应。这样就可以实现js调用安卓方法。

实现的时候需要注意一些小的细节，否则可能会导致不成功。