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调用安卓方法。

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