搜索
热搜: 活动 交友 discuz
查看: 3267|回复: 0
打印 上一主题 下一主题

android html5 JS交互

[复制链接]

160

主题

165

帖子

814

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
814
跳转到指定楼层
楼主
发表于 2015-11-5 21:21:55 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主要实现过程如下:通过加载本地的html文件(里面有js脚本),实现android本地方法和js中的交互。
第一步:
mainfest.xml中加入网络权限


  1. <span style="background-color: rgb(255, 255, 255);"><uses-permission android:name="android.permission.INTERNET" />  </span>
复制代码
第二步:
加载本地写好的html文件(定义好js中提供给android调用的方法 funFromjs(),和android提供给js调用的对象接口fun1FromAndroid(String name)),放在 assets目录下。
  1. view plaincopy在CODE上查看代码片派生到我的代码片
  2. <body>  
  3.     <a>js中调用本地方法</a>  
  4.     <script>  
  5.       
  6.     function funFromjs(){  
  7.         document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";  
  8.     }  
  9.     var aTag = document.getElementsByTagName('a')[0];  
  10.     aTag.addEventListener('click', function(){  
  11.         //调用android本地方法  
  12.         myObj.fun1FromAndroid("调用android本地方法fun1FromAndroid(String name)!!");  
  13.         return false;  
  14.     }, false);  
  15.     </script>  
  16.     <p></p>  
  17.     <div id="helloweb">   
  18.   
  19.     </div>  
  20. </body>  
复制代码


第三步:
实现android工程与js交互的相关代码
android主题代码:


  1. @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })  
  2.    @Override  
  3.    protected void onCreate(Bundle savedInstanceState) {  
  4.        super.onCreate(savedInstanceState);  
  5.        setContentView(R.layout.activity_main);  
  6.        //初始化  
  7.        initViews();  
  8.   
  9.        //设置编码  
  10.        mWebView.getSettings().setDefaultTextEncodingName("utf-8");  
  11.        //支持js  
  12.        mWebView.getSettings().setJavaScriptEnabled(true);  
  13.        //设置背景颜色 透明  
  14.        mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));  
  15.        //设置本地调用对象及其接口  
  16.        mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");  
  17.        //载入js  
  18.        mWebView.loadUrl("file:///android_asset/test.html");  
  19.          
  20.        //点击调用js中方法  
  21.        mBtn1.setOnClickListener(new View.OnClickListener() {  
  22.   
  23.            @Override  
  24.            public void onClick(View v) {  
  25.                mWebView.loadUrl("javascript:funFromjs()");  
  26.                Toast.makeText(mContext, "调用javascript:funFromjs()", Toast.LENGTH_LONG).show();  
  27.            }  
  28.        });  
  29.   
  30.    }  
复制代码


js调用的android对象方法定义

  1. public class JavaScriptObject {  
  2.     Context mContxt;  
  3.     @JavascriptInterface //sdk17版本以上加上注解  
  4.     public JavaScriptObject(Context mContxt) {  
  5.         this.mContxt = mContxt;  
  6.     }  
  7.   
  8.     public void fun1FromAndroid(String name) {  
  9.         Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();  
  10.     }  
  11.   
  12.     public void fun2(String name) {  
  13.         Toast.makeText(mContxt, "调用fun2:" + name, Toast.LENGTH_SHORT).show();  
  14.     }  
  15. }  
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|安卓论坛  

GMT+8, 2024-5-19 07:40 , Processed in 0.065865 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Design S!|ƽ̶

快速回复 返回顶部 返回列表