javascript与native的交互

在写这篇文章之情，参考了很多，js与native的交互的资料，下面先给出我参考的一些东西，然后在给我我的代码。

   使用场景：
   1.）添加权限
   <uses-permission android:name="android.permission.INTERNET" />

   2.）布局文件
   <WebView
   android:id="@+id/webView"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

   3.）数据加载
   加载本地资源

webView.loadUrl("file:///android_asset/example.html");
加载网络资源

webView.loadUrl("www.xxx.com/index.html");

   添加请求头信息（另外一种重载 loadurl() ）

   Map<String,String> map=new HashMap<String,String>();
   map.put("User-Agent","Android");
   webView.loadUrl("www.xxx.com/index.html",map);


       也可以加载html片段
   String data = " Html 数据";
   webView.loadData(data, "text/html", "utf-8");
   实测会发现loadData会导致中文乱码，所以一般情况使用如下代码

   String data = " Html 数据";
   webView.loadDataWithBaseURL(null,data, "text/html", "utf-8",null);


       // mWebView.loadUrl("https://baidu.com");
   // mWebView.loadUrl("file:////android_asset/javascriptDemo.html");
   String data = "<div style=\"text-align:center;\">《静夜思》· 李白<br />床前明月光，<br />疑是地上霜。 <br />举头望明月， <br />低头思故乡。<br /><img src=\"http://www.xiexingcun.com/Poetry/6/images/53e.jpg\" alt=\"\" /><br /><img src=\"http://www.xiexingcun.com/Poetry/6/images/53.jpg\" alt=\"\" /><br /><br /><img src=\"http://www.xiexingcun.com/Poetry/6/images/53b.jpg\" alt=\"\" /><br /></div>\n" +
                   "！";
   // mWebView.loadData(data,"text/html","utf-8");
       mWebView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);

           这篇文章写的例子，很好的解决了问题。
               https://blog.csdn.net/zhyh1986/article/details/42169159

主要是这个2个类方法的说明
               https://blog.csdn.net/lanxingfeifei/article/details/52045082

       WebView webView;

webView =(WebView) findViewById(R.id.webview);

webView.setWebChromeClient(new WebChromeClient());

webView.setWebViewClient(new WebViewClient());

webView.getSettings().setJavaScriptEnabled(true);

webView.loadUrl(url);

       8）WebView 缓存控制

       LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
       LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
       LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
       LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
       LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
       WebSettings webSettings = webView.getSettings();
       webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

       9.）WebView屏幕自适应
       WebSettings webSettings = webView.getSettings();
       webSettings.setUseWideViewPort(true);
       webSettings.setLoadWithOverviewMode(true);

       10.）其他不常用设置
       WebSettings webSettings = webView.getSettings();
       webSettings.setSupportZoom(true); //支持缩放
       webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
       webSettings.supportMultipleWindows(); //多窗口
       webSettings.setAllowFileAccess(true); //设置可以访问文件
       webSettings.setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点
       webSettings.setBuiltInZoomControls(true); //设置支持缩放
       webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
       webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片


       11.)知识扩展WebViewJSBridge
       虽然谷歌也提供了js与native函数互相调用的方式，但是通过addjavascriptInterface这种方式在Android 4.2以下版本存在一定的安全隐患，在Android 4.2以上也需要加@JavascriptInterface注解，否则无法调用。
       基于上面的原因建议学习一下
       WebViewJSBridge这个比较不错的开源框架，地址：https://github.com/firewolf-ljw/WebViewJSBridge


       干我们这行，啥时候懈怠，就意味着长进的停止，长进的停止就意味着被淘汰，只能往前冲，直到凤凰涅槃的一天！


下面这篇文章是，大概介绍了webview的用法。
http://www.cnblogs.com/whoislcj/p/5645025.html

   亲测 http://www.cnblogs.com/whoislcj/p/5980240.html

特别注意： mWebView.addJavascriptInterface(TestActivity.this, "app");

这个app的标记，一定要统一，特别是你写的html的文件，，必须也是这个名字：比如： app.html, 必须统一。

还有一点事，，，

1. mWebView.loadUrl("javascript:actionFromNative()");

function actionFromNative(){
     document.getElementById("log_msg").innerHTML +=
         "<br\>Native调用了js函数";
}
native 里面的方法名必须和 js里面的方法统一。

<div>
    <button onClick="window.app.actionFromJs()">点击调用Native代码</button>
</div>
<br/>
<div>
    <button onClick="window.app.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>
</div>

@android.webkit.JavascriptInterface
public void actionFromJsWithParam(final String str) {
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            Toast.makeText(TestActivity.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();
            String text = logTextView.getText() + "\njs调用了Native函数传递参数：" + str;
            logTextView.setText(text);
        }
    });
}

js调用原生的方法：native里面的方法，必须和js里面的方法一致。

安卓代码：

public class TestActivity extends AppCompatActivity {

 private WebView mWebView;
 private TextView logTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test2);

        mWebView = (WebView) findViewById(R.id.webview);
        //开启javascript
        //使用setJavaScriptEnabled可以将XSS漏洞引入您的应用程序，仔细查看。
        //如果您不确定您的应用程序是否真的需要JavaScript支持，则您的代码不应调用setJavaScriptEnabled
        WebSettings settings = mWebView.getSettings();
        mWebView.loadUrl("file:////android_asset/app.html");
        settings.setJavaScriptEnabled(true);//允许进行js交互。
//        settings.setUseWideViewPort(true);
//        settings.setLoadWithOverviewMode(true);
//       mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
//        settings.setBuiltInZoomControls(true);

        mWebView.addJavascriptInterface(TestActivity.this, "app");
        logTextView = (TextView) findViewById(R.id.text);
        Button button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 无参数调用
                mWebView.loadUrl("javascript:actionFromNative()");
                // 传递参数调用
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });


        //todo:在点击请求的是连接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webView里跳转，不跳到浏览器里边
        //todo:WebViewClient 这个类主要帮助WebView处理各种通知、请求时间的
        mWebView.setWebViewClient(new WebViewClient());
//       mWebView.setWebViewClient(new WebViewClient() {
//           public boolean shouldOverrideUrlLoading(WebView view, String url) {
//               view.loadUrl(url);
//               return true;
//           }
//       });


//       mWebView.setWebViewClient(new WebViewClient());

        //todo:WebChromeClient主要辅助WebView处理JavaScript的对话框、网站图片、网站title、加载进度等比如
//        mWebView.setWebChromeClient(new WebChromeClient());


//        mWebView.loadUrl("https://baidu.com");
        String data = "<div style=\"text-align:center;\">《静夜思》· 李白<br />床前明月光，<br />疑是地上霜。 <br />举头望明月， <br />低头思故乡。<br /><img src=\"http://www.xiexingcun.com/Poetry/6/images/53e.jpg\" alt=\"\" /><br /><img src=\"http://www.xiexingcun.com/Poetry/6/images/53.jpg\" alt=\"\" /><br /><br /><img src=\"http://www.xiexingcun.com/Poetry/6/images/53b.jpg\" alt=\"\" /><br /></div>\n" +
                "！";
//            mWebView.loadData(data,"text/html","utf-8");
//           mWebView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);



    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (mWebView.canGoBack()) {
                mWebView.goBack();//返回上一个浏览器
                return true;
            } else {
                finish();//关闭activity
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    @android.webkit.JavascriptInterface
    public void actionFromJs() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(TestActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() + "\njs调用了Native函数";
                logTextView.setText(text);
            }
        });
    }

    @android.webkit.JavascriptInterface
    public void actionFromJsWithParam(final String str) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(TestActivity.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() + "\njs调用了Native函数传递参数：" + str;
                logTextView.setText(text);
            }
        });
    }

xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".activity.TestActivity">
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <TextView android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="111111"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Native调用js函数"/>

</LinearLayout>

html文件：app.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    function actionFromNative(){
         document.getElementById("log_msg").innerHTML +=
             "<br\>Native调用了js函数";
    }

    function actionFromNativeWithParam(arg){
         document.getElementById("log_msg").innerHTML +=
             ("<br\>Native调用了js函数并传递参数："+arg);
    }

    </script>
</head>
<body>
<p>WebView与Javascript交互</p>
<div>
    <button onClick="window.app.actionFromJs()">点击调用Native代码</button>
</div>
<br/>
<div>
    <button onClick="window.app.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>

javascript与native的交互

特别注意： mWebView.addJavascriptInterface(TestActivity.this, "app");

猜你喜欢