android中Webview与javascript的交互（互相调用）

最新推荐文章于 2024-04-18 09:50:42 发布

大圣代

最新推荐文章于 2024-04-18 09:50:42 发布

阅读量488

点赞数

分类专栏： Android Android 入门篇文章标签： android

Android 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

Android 入门篇

14 篇文章 0 订阅

订阅专栏

最近做Android项目中遇到要在webview中做与js交互相关的东东，涉及到js中调用android本地的方法，于是查了资料整理了一下android和js互相调用的过程。如下demo，demo的主要实现过程如下：通过加载本地的html文件（里面有js脚本），实现android本地方法和js中的交互。

第一步：

mainfest.xml中加入网络权限

[java]view plaincopy 
   
 <uses-permission android:name="android.permission.INTERNET" />  

第二步：

加载本地写好的html文件（定义好js中提供给android调用的方法 funFromjs(),和android提供给js调用的对象接口fun1FromAndroid(String name)）,放在 assets目录下。

[html]view plaincopy 
   
 <body>  
     <a>js中调用本地方法</a>  
     <script>  
       
     function funFromjs(){  
         document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";  
     }  
     var aTag = document.getElementsByTagName('a')[0];  
     aTag.addEventListener('click', function(){  
         //调用android本地方法  
         myObj.fun1FromAndroid("调用android本地方法fun1FromAndroid(String name)！！");  
         return false;  
     }, false);  
     </script>  
     <p></p>  
     <div id="helloweb">   
   
     </div>  
 </body>  

第三步：

实现android工程与js交互的相关代码

android主题代码：

[java]view plaincopy 
   
 @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        //初始化  
        initViews();  
   
        //设置编码  
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");  
        //支持js  
        mWebView.getSettings().setJavaScriptEnabled(true);  
        //设置背景颜色 透明  
        mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));  
        //设置本地调用对象及其接口  
        mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");  
        //载入js  
        mWebView.loadUrl("file:///android_asset/test.html");  
          
        //点击调用js中方法  
        mBtn1.setOnClickListener(new View.OnClickListener() {  
   
            @Override  
            public void onClick(View v) {  
                mWebView.loadUrl("javascript:funFromjs()");  
                Toast.makeText(mContext, "调用javascript:funFromjs()", Toast.LENGTH_LONG).show();  
            }  
        });  
   
    }  

js调用的android对象方法定义

[java]view plaincopy 
   
 public class JavaScriptObject {  
     Context mContxt;  
     @JavascriptInterface //sdk17版本以上加上注解  
     public JavaScriptObject(Context mContxt) {  
         this.mContxt = mContxt;  
     }  
   
     public void fun1FromAndroid(String name) {  
         Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();  
     }  
   
     public void fun2(String name) {  
         Toast.makeText(mContxt, "调用fun2:" + name, Toast.LENGTH_SHORT).show();  
     }  
 }  

效果图：

。。。。

ps：据网友反应，在Android4.4以上不支持js的一些方法了，上面的思想大概是这样，要实用的大家可以参考这个开源项目：

https://github.com/lzyzsd/JsBridge

点击去下载整个demo工程

大圣代

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android中Webview与javascript的交互（互相调用）

最近做Android项目中遇到要在webview中做与js交互相关的东东，涉及到js中调用android本地的方法，于是查了资料整理了一下android和js互相调用的过程。如下demo，demo的主要实现过程如下：通过加载本地的html文件（里面有js脚本），实现android本地方法和js中的交互。第一步：mainfest.xml中加入网络权限[java
复制链接

扫一扫