android webview和js的交互

第一步:

mainfest.xml中加入网络权限

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

 如果是访问本地的那就不需要加这个权限了

 

第二步:

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

eg.

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

eg.

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

    }

}

 

 

 

注意:api16以后需要在调用的本地方法上加注解@JavascriptInterface

 

【注意事项】

1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。

2.如果访问的页面中有Javascript,则webview必须设置支持Javascript。webview.getSettings().setJavaScriptEnabled(true);  

3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象。

4.对于第一点, 如果使用Android SDK提供了一个schema,前缀为"file:///android_asset/"。WebView遇到这样的schema,会去加载assets 目录下的资源。如"file:///android_asset/demo.html",可不必使用许 可"android.permission.INTERNET"。

 

  • WebView开启JavaScript脚本执行
  • WebView设置供JavaScript调用的交互接口。
  • 客户端和网页端编写调用对方的代码。
  • Java和js交互有以下一些特点:

 

1.Java 调用 js 里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互 性很强的事情,这种速度会让人疯掉的。而反过来就不一样了, js 去调 java 的方法,速度很快,基本上 40-50 毫秒一次。所以尽量 用 js 调用 java 方法,而不是 java 去调用 js 函数。

2.Java 调用 js 的函数,没有返回值,而 Js 调 用 java 方法,可以有返回值。返回值可以是基本类型、字符串,也可以是对象。如果是字符串,有个很讨厌的问题,第 3 点我会讲的。如果是对象,这 个对象会被转换为 js 的对象,直接可以访问里面的方法。但是我不推荐 java 返回给 js 的是对象,除非是必须。因为 js 收 到 java 返回的对象,会产生一些交换对象,而如果这些对象的数量增加到了 500 或 600 以上,程序就会出问题。所以尽量返回基本数据类型或 者字符串。

3.Js 调用 Java 的方法,返回值如果是字符串,你会发现这个字符串是 native 的,不能对它进行一些修改操作, 比如想对它 substr ,取不到。怎么解决呢?转成 locale 的。使用 toLocaleString() 函数就可以了。不过这个函数的速度 并不快,转化的字符串如果很多,将会很耗费时间。

 

WebViewClient主要帮助WebView处理各种通知、请求事件的,比如:

  • onLoadResource
  • onPageStart
  • onPageFinish
  • onReceiveError 等

 WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如:

  • onCloseWindow(关闭WebView)
  • onCreateWindow()
  • onJsAlert (WebView上alert无效,需要定制WebChromeClient处理弹出)
  • onJsPrompt
  • onJsConfirm
  • onReceivedTitle等

一个简单的demo

posted on 2015-11-25 10:49  傲娇草泥喵  阅读(301)  评论(0编辑  收藏  举报