HTML---Android与js交互实例

Android中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true

Android（Java）与JavaScript（HTML）交互有四种情况：

1） Android（Java）调用HTML中js代码

2） Android（Java）调用HTML中js代码（带参数）

3） HTML中js调用Android（Java）代码

4） HTML中js调用Android（Java）代码（带参数）

下面示例总结这四种情况，直接上干货：

1） Android（Java）

[java] view plain copy print ?

privatevoidshowWebView(){//webView与js交互代码
try{
mWebView=newWebView(this);
setContentView(mWebView);
mWebView.requestFocus();
mWebView.setWebChromeClient(newWebChromeClient(){
@Override
publicvoidonProgressChanged(WebViewview,intprogress){
JSAndroidActivity.this.setTitle("Loading...");
JSAndroidActivity.this.setProgress(progress);
if(progress>=80){
JSAndroidActivity.this.setTitle("JsAndroidTest");
}
}
});
mWebView.setOnKeyListener(newView.OnKeyListener(){//webviewcangoback
@Override
publicbooleanonKey(Viewv,intkeyCode,KeyEventevent){
if(keyCode==KeyEvent.KEYCODE_BACK&&mWebView.canGoBack()){
mWebView.goBack();
returntrue;
}
returnfalse;
}
});
WebSettingswebSettings=mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("utf-8");
mWebView.addJavascriptInterface(getHtmlObject(),"jsObj");
mWebView.loadUrl("http://192.168.1.121:8080/jsandroid/index.html");
}catch(Exceptione){
e.printStackTrace();
}
}
privateObjectgetHtmlObject(){
ObjectinsertObj=newObject(){
publicStringHtmlcallJava(){
return"HtmlcallJava";
}
publicStringHtmlcallJava2(finalStringparam){
return"HtmlcallJava:"+param;
}
publicvoidJavacallHtml(){
runOnUiThread(newRunnable(){
@Override
publicvoidrun(){
mWebView.loadUrl("javascript:showFromHtml()");
Toast.makeText(JSAndroidActivity.this,"clickBtn",Toast.LENGTH_SHORT).show();
}
});
}
publicvoidJavacallHtml2(){
runOnUiThread(newRunnable(){
@Override
publicvoidrun(){
mWebView.loadUrl("javascript:showFromHtml2('IT-homerblog')");
Toast.makeText(JSAndroidActivity.this,"clickBtn2",Toast.LENGTH_SHORT).show();
}
});
}
};
returninsertObj;
}

2） js（HTML）

[html] view plain copy print ?

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<metahttp-equiv="Expires"content="0">
<metahttp-equiv="Pragma"content="no-cache">
<metahttp-equiv="Cache-Control"content="no-store,no-cache">
<metaname="Handheldfriendly"content="true">
<metaname="viewport"content="width=100%;initial-scale=1.0;user-scalable=yes">
<metaname="robots"content="all">
<metaname="keywords"contect="doodle,mobile,doodlemobile,game,games">
<metaname="description"content="MakePeople'sMobileLifeMoreConnectedThroughGames.">
<title>jsandroid_test</title>
<scripttype="text/javascript"language="javascript">
functionshowHtmlcallJava(){
varstr=window.jsObj.HtmlcallJava();
alert(str);
}
functionshowHtmlcallJava2(){
varstr=window.jsObj.HtmlcallJava2("IT-homerblog");
alert(str);
}
functionshowFromHtml(){
document.getElementById("id_input").value="JavacallHtml";
}
functionshowFromHtml2(param){
document.getElementById("id_input2").value="JavacallHtml:"+param;
}
</script>
</head>
<body>
helloIT-homer
<inputtype="button"value="HtmlcallJava"onclick="showHtmlcallJava()"/>
<inputtype="button"value="HtmlcallJava2"onclick="showHtmlcallJava2()"/>
<inputid="id_input"style="width:90%"type="text"value="null"/>
<inputtype="button"value="JavacallHtml"onclick="window.jsObj.JavacallHtml()"/>
<inputid="id_input2"style="width:90%"type="text"value="null"/>
<inputtype="button"value="JavacallHtml2"onclick="window.jsObj.JavacallHtml2()"/>
</body>
</html>

3）运行结果：

HTML---Android与js交互实例_第1张图片

4）代码解析：

（1）允许Android执行js脚本设置

Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj"); // jsObj 为桥连对象

Android容许执行js脚本需要设置：webSettings.setJavaScriptEnabled(true);

（2） js（HTML）访问Android（Java）代码

js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如：window.jsObj.HtmlcallJava()

（3） Android（Java）访问js（HTML）代码

Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript: showFromHtml()");

说明：

1） Android访问url网址，需在AndroidManifest.xml文件，配置容许访问网络的权限：
<uses-permission android:name="android.permission.INTERNET" />

2） Android（Java）调用js（HTML）时，使用的mWebView.loadUrl("javascript: showFromHtml()");函数需在UI线程运行，因为mWebView为UI控件

[java] view plain copy print ?

publicvoidJavacallHtml(){
runOnUiThread(newRunnable(){
@Override
publicvoidrun(){
mWebView.loadUrl("javascript:showFromHtml()");
Toast.makeText(JSAndroidActivity.this,"clickBtn",Toast.LENGTH_SHORT).show();
}
});
}

源码下载

更多相关文章

随机推荐