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

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

首先讲很重要的一步 androidstudio 运行人员需要在build 文件上添加

sourceSets {
        main {
            manifest.srcFile 'src/main/AndroidManifest.xml'
            java.srcDirs = ['src/main/java']
            res.srcDirs = ['src/main/res']
            assets.srcDirs = ['src/main/assets']
        }
    }

第一步：
mainfest.xml中加入网络权限

<uses-permission android:name="android.permission.INTERNET" />

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

目录视图.png

<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主题代码

@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对象方法定义

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();  
    }  
}

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

推荐阅读更多精彩内容