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交互的?
我们都知道在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>
在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>
-
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方法的实现交互方式中的一种。下面给出完整代码:
-
public class MainActivity extends AppCompatActivity {
-
public static final String TAG = "MainActivity";
-
private WebView mWebView;
-
@Override
-
protected 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";
-
}
-
}
-
}
-
<!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>