浅谈webview与js交互
浅谈下webview与js的交互,项目中因为需要获取页面中的许多属性,所以用到了这些,让后端在方法中传了过来.
下面的demo是本地的html代码,具体可以仿写,都差不多,注重思想.
1:项目目录
2:jump的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script type="text/javascript">
//Java调用JS代码无参数
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数";
}
//Java调用JS代码有参数
function javacalljsparam(param){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数含参数param"+param;
}
function testFunc(){
window.WebViewFunc.jsCallWebView();
}
</script>
<title>测试页面</title>
</head>
<body>
<a onClick="testFunc()">无参数JS调用java代码</a><br/> <br/> <br/>
<a onClick="window.WebViewFunc.jsCallWebView('含有参数')">含参数调用java代码</a><br/>
<br />
<div id="content">内容显示</div>
</body>
</html>
3:web的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script type="text/javascript">
//Java调用JS代码无参数
function javacalljs(){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数";
}
//Java调用JS代码有参数
function javacalljsparam(param){
document.getElementById("content").innerHTML +=
"<br\>java调用了js函数含参数param"+param;
}
function testFunc(){
window.WebViewFunc.jsCallWebView();
}
</script>
<title>测试页面</title>
</head>
<body>
<a onClick="testFunc()">无参数JS调用java代码____________</a><br/> <br/><br/>
<script>
function doIt() {
var param = '{\"action\":\"webview\",\"infotype\":\"G1\",\"fromurl\":\"http://m.nearbar.com/m/nad/adclick.jsp?sid=3&adid=43&a=11010805&xid=0&ruid=87120\",\"title\":\"光明纯牛奶\",\"digest\":\"新鲜我的生活\",\"headimgs\":\" http://upload.nearbar.com/photos/1101/G1/0/43_1469154394009.jpeg\"}';
window.WebViewFunc.jsCallWebView(param);
}
</script>
<a onClick="doIt()">含参数调用java代码--------</a><br/>
<br />
<div id="content">内容显示 <a href="jump.html" target="_self">跳转新页面jump.html</a></div>
</body>
</html>
4:这里需要注意一点,当参数是一个json串时,格式需要格外注意,尤其是,需要在调用是参数需要加上单引号,如果是后端的html或者jsp代码时,需要注意编码.
5:MJavascriptInterface的代码
public class MJavascriptInterface {
private Context context;
public MJavascriptInterface(Context context) {
super();
this.context = context;
}
/**
* JS调用Android(Java)无参数的方法
*/
@JavascriptInterface
public void jsCallWebView() {
Toast.makeText(context, "JS Call Java!",
Toast.LENGTH_SHORT).show();
}
/**
* JS调用Android(Java)含参数的方法
* @param param
*/
@JavascriptInterface
public void jsCallWebView(String param) {
Toast.makeText(context, "JS Call Java!" + param,
Toast.LENGTH_SHORT).show();
}
}
6:主界面webview加载jump的代码.
//添加JS调用Android(Java)的方法接口
MJavascriptInterface mJavascriptInterface = new MJavascriptInterface(getApplicationContext());
webView.addJavascriptInterface(mJavascriptInterface,"WebViewFunc");
这里需要注意,android2.3之后, JavascriptInterface需要加上注解.
另外别忘了添加setJavaScriptEnabled(true);
