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">
- <!--savedfromurl=(0032)http://localhost:8080/jsandroid/-->
- <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
- <br>
- <br>
- <br>
- <inputtype="button"value="HtmlcallJava"onclick="showHtmlcallJava()"/>
- <br>
- <inputtype="button"value="HtmlcallJava2"onclick="showHtmlcallJava2()"/>
- <br>
- <br>
- <br>
- <br>
- <inputid="id_input"style="width:90%"type="text"value="null"/>
- <br>
- <inputtype="button"value="JavacallHtml"onclick="window.jsObj.JavacallHtml()"/>
- <br>
- <br>
- <br>
- <inputid="id_input2"style="width:90%"type="text"value="null"/>
- <br>
- <inputtype="button"value="JavacallHtml2"onclick="window.jsObj.JavacallHtml2()"/>
- </body>
- </html>
3) 运行结果:
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();
- }
- });
- }
源码下载
更多相关文章
- android 图形系统
- Android中Javascript中的调用
- Android:AsyncTask使用
- Android入门教程五十五之DrawerLayout(官方侧滑菜单)的简单使用
- 详解 Android(安卓)的 Activity 组件
- Android实习笔记----调用拨号器,邮件短信和Google 地图
- Android(安卓)SDCard Mount 流程分析
- 关于android studio开发APP中,给单个Activity设置隐藏上面标题栏
- Android内核的简单分析