有些时候为了偷懒或者业务需求，App里有时候是套网页的，好比PC 版的 QQ音乐库。点击网页里的播放为啥软件就会响应呢？道理是一样的，只不过现在主角是 Android 而已。
webView 和 javascript 交互，也就是相互调用对方的方法，也就叫做 混合开发，是不是瞬间感觉高大上了。刚开始随意百度了一下，都是坑人的东西，各种代码不全有问题。谷歌
之后才看明白了，其实用起来很简单。
首先我们需要一个html5代码。这里我自己先建一个 html5 页面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function showMsg (msg){ alert(msg) } </script> <title></title> </head> <body> <button onClick="window.demo.clickOnAndroid()">调用Android方法</button> </body> </html>
activity布局
<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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.example.webview_javascript.MainActivity" > <Button android:id="@+id/showJsMethod" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="显示js方法"/> <Button android:id="@+id/shuaxin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="刷新网页"/> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" > </WebView> </LinearLayout> MainActivity.java
package com.example.webview_javascript; import android.annotation.SuppressLint; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; @SuppressLint("SetJavaScriptEnabled") public class MainActivity extends Activity { private WebView web; private Button showJsMethod; private Button shuaxin; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); web = (WebView) findViewById(R.id.webView); showJsMethod = (Button) findViewById(R.id.showJsMethod); shuaxin = (Button) findViewById(R.id.shuaxin); shuaxin.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { web.loadUrl("http://192.168.0.2:8020/HelloHBuilder/index.html"); } }); showJsMethod.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { web.loadUrl("javascript:showMsg(\"我是Android调用的\")"); } }); WebSettings webSettings = web.getSettings(); web.setWebChromeClient(new WebChromeClient() { }); webSettings.setJavaScriptEnabled(true); webSettings.setSupportZoom(false); web.loadUrl("http://192.168.0.2:8020/HelloHBuilder/index.html"); web.addJavascriptInterface(new DemoJavaScriptInterface(this, web), "demo"); web.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 在这里执行你想调用的js函数 Log.i("", "web_网页加载完成"); } }); } }
DemoJavaScriptInterface.java
package com.example.webview_javascript; import android.content.Context; import android.os.Handler; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.Toast; public class DemoJavaScriptInterface { private Context context; private WebView web; private Handler mHandler = new Handler(); DemoJavaScriptInterface(Context context,WebView web) { this.context = context; this.web = web; } /** * This is not called on the UI thread. Post a runnable to invoke * loadUrl on the UI thread. */ @JavascriptInterface public void clickOnAndroid() { Toast.makeText(context, "点击了", Toast.LENGTH_SHORT).show(); } }
注意 : web.addJavascriptInterface(new DemoJavaScriptInterface(this, web),"demo");
上面的demo 可以说是把 接口开放给js 并且起个名字， js里 就可以 <button onClick="window.接口名字.你的方法名">调用Android方法</button> 来调用，一般情况下，如果想要获取 js 之后过后的返回值，可以通过js调用java方法传回来。如果发现alert 弹不出来 请确保 你是 在 网页加载完成后调用的。
