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

android webview中使用Java调用JavaScript方法并获取返回值_Android

2016-11-14 11:01 986 查看

webview与js交互相关,涉及到js中调用android本地的方法，于是整理了一下android和js互相调用的过程。如下demo，demo的主要实现过程如下：通过加载本地的html文件（里面有js脚本），实现android本地方法和js中的交互。

第一步：

mainfest.xml中加入网络权限

[java]
view plain
copy

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

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

[html]
view plain
copy

<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 plain
copy

@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 plain
copy

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

android用webview打开一个网页，调用里面的javascript方法，同时相互传参。

获取返回值的代码如下：

Java:

代码如下:

protected void onCreate(Bundle savedInstanceState)

{

........

x = (WebView)this.findViewById(R.id.webView_viewTable);

x.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

x.getSettings().setBuiltInZoomControls(true);

x.getSettings().setJavaScriptEnabled(true);

x.addJavascriptInterface(new JsToJava(), "stub"); //JsToJava是内部类，代码在后面。stub是接口名字。
//x.loadUrl("http://192.168.1.1/init.html");//这句是载入一个html页面。但是因为直接load一个网页会有延迟，所以最好用下面这句:

x.loadDataWithBaseURL("", data, "text/html", "UTF-8",""); //这句里面data是init.html的内容。就是代码。直接用FileInputStream获取到就好。

x.loadUrl("javascript:setValuesJson('hello world')"); //hello world是给JavaScript传递的参数。setValuesJson是页面里JavaScript的方法。如果传递的参数中有双引号的话，用下面的写法：

String url = "javascript:setValuesJson(/"" + jsonString + "/")";

x.loadUrl(url);

.........

}//onCreate结束

再写一个内部类：

代码如下:

private class JsToJava

{

        public void jsMethod(String paramFromJS)

        {

            //Log.i("CDH", paramFromJS);

            System.out.println("js返回结果" + paramFromJS);//处理返回的结果

        }

}

JavaScript代码:

代码如下:

<script type="text/javascript">

        function setValuesJson(param)

        {

            alert(param);//param是java传过来的值，即"hello world".

            var result = "传回Java的string";

            window.stub.jsMethod(result);//用接口stub, 通过调用内部类中的方法jsMethod给java传回result。

        }

</script>

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

标签： android javascript java webview html

相关文章推荐

新的分享

章节导航