WebView与Js交互
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebView与Js交互相关的知识，希望对你有一定的参考价值。
上周五，老大让暂时搞一个评分app，俩页面。第一个页面显示全部待评分的物业，第二个页面是相应物业的评分页面。评分页面是表格样式的，所以就让web端的同学写个html，我们通过Webview去展示。
这里不不过展示就完了，web页面须要知道我们点击的哪个物业以及所填评委的名字并显示在html上。所以client须要把这两个值传给html。当评委评分完后点击html里的提交button并提交成功后。client也须要进行响应。做法就是client提供接口，js代码去调用来获取值——JS调用android本地代码来实现。
今天主要总结两点：一是使用Js去调用client公有方法。二是从client调用Js中的方法
一、JS调用client公有方法
上样例：（PS：不会写JS，就网上找了一段js代码）
新建项目，在项目的assets目录下创建一个test.html：
<body>
<a>Web与Js交互:点击我，来调用client的show方法吧</a>
<script>
function funFromjs(){
document.getElementById("helloweb").innerHTML="我是JS里的方法";
}
var aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click', function(){
//调用android本地方法
AppFunction.show("Js调用show()方法成功。");
return false;
}, false);
</script>
<p></p>
<div id="helloweb">
</div>
</body>
这段代码有两个重点。一是funFromjs()方法，该方法是js里提供给client去调用的方法。二是AppFunction.show();show()方法是client提供给js去调用的方法，AppFunction是定义的接口名。
底下是client的实现：
package com.aliao.web; import android.annotation.SuppressLint; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.webkit.javascriptInterface; import android.webkit.WebView; import android.widget.Toast; public class MainActivity extends ActionBarActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); } private void initViews() { String url = "file:///android_asset/test.html"; mWebView = (WebView) findViewById(R.id.webview); mWebView.getSettings().setJavaScriptEnabled(true);//支持js mWebView.addJavascriptInterface(this, "AppFunction"); mWebView.loadUrl(url); } @JavascriptInterface public void show(String msg){ Toast.makeText(this, msg, Toast.LENGTH_SHORT).show(); } }
这里须要注意的是，在Android4.2.2及之后的版本号仅仅有带有JavascriptInterface凝视的public方法才可以被js訪问。所以要在show()方法前加：@JavascriptInterface
详细查看：Webview addJavascriptInterface()
public void addJavascriptInterface (Object object, String name)
Added in API level 1Injects the supplied Java object into this WebView. The object is injected into the JavaScript context of the main frame, using the supplied name. This allows the Java object‘s methods to be accessed from JavaScript. For applications targeted to API level
JELLY_BEAN_MR1and above, only public methods that are annotated withJavascriptInterfacecan be accessed from JavaScript. For applications targeted to API levelJELLY_BEANor below, all public methods (including the inherited ones) can be accessed, see the important security note below for implications.Note that injected objects will not appear in JavaScript until the page is next (re)loaded. For example:
class JsObject { @JavascriptInterface public String toString() { return "injectedObject"; } } webView.addJavascriptInterface(new JsObject(), "injectedObject"); webView.loadData("", "text/html", null); webView.loadUrl("javascript:alert(injectedObject.toString())");这段是说，注入提供的java对象到WebView中。该对象以接口名的方式被注入到Javascript的上下文环境中。这样就能够在JavaScript中去訪问该对象的方法。对于APl Level在4.2及以上的应用。仅仅有带有JavascriptInterface凝视的的公有方法能够被JavaScript訪问。对于Api Level在4.1及下面的应用。全部的公有方法都能够被訪问（包含继承的方法），參见下面的重要的安全注意的影响。
（系统版本号在4.2下面要考虑的安全问题先mark下这个blog：Android WebView的Js对象注入漏洞解决方式）
这里我把当前类的对象注入到webview中，命名为AppFunction。这样在JavaScript里就能够通过AppFunction直接訪问MainActivity中定义的供js调用方法。
mWebView.addJavascriptInterface(this, "AppFunction");也能够自己定义一个类，比如上例中的
webView.addJavascriptInterface(new JsObject(), "injectedObject");定义一个JsObject类。该类里定义了提供给Js调用的方法，将该对象命名为injectedOnject。即接口名注入到js中。
执行后的结果：
二、JS调用client公有方法
前面写过的test.html里已经提供了一个供Androidclient调用的方法funFromjs()。那client的代码要怎么写？
在MainActivity的布局文件里加入一个button，点击该button后，调用js中的funFromjs方法：
package com.aliao.web;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity {
private WebView mWebView;
private Button mBtnCallJsFun;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
String url = "file:///android_asset/test.html";
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);//支持js
mWebView.addJavascriptInterface(this, "AppFunction");
mWebView.loadUrl(url);
mBtnCallJsFun = (Button) findViewById(R.id.btn_call_js_fun);
mBtnCallJsFun.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mWebView.loadUrl("javascript:funFromjs()");
}
});
}
@JavascriptInterface
public void show(String msg){
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}
}
执行结果：
以上是关于WebView与Js交互的主要内容，如果未能解决你的问题，请参考以下文章