您的位置：首页 > 移动开发 > Android开发

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

2016-04-18 16:20 661 查看

最近做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" />

[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>

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

           }

       });



   }

[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;



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

    }

}

[java] view
plaincopy

public class JavaScriptObject {

    Context mContxt;



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

    }

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航