Js Android 交互

作者: lzy2626 | 来源:发表于2018-09-19 16:12 被阅读0次

    本文思路:

    1,webview介绍,

    2,android中的书写

    3,js中的书写,

    4,出现的问题,一定要看完。不然。。。就出错了

    说道数据交互,首先要先说一下交互需要使用的控件WebView;

    简单的介绍下用法:

    和正常控件一样,声明,初始化,

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

    加载网络的url

    myWebView.loadUrl(“http://www.google.com“);

    加载本地的url,在asset目录下
    myWebView.loadUrl(“file:///android_asset/XX.html“);
    打开设置,添加js支持,才可以进行与js交互。相当于许可证。

    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    //在JSHook类里实现javascript想调用的方法,并将其实例化传入webview, "hello"这个字串告诉javascript调用哪个实例的方法

    这是核心方法

    webView.addJavascriptInterface(new JSHook(), "hello");

    定义一个类,将方法封装,用来供js调用;

    public class JSHook{
            public void javaMethod(String p){
                Log.d(tag , "JSHook.JavaMethod() called! + "+p);
            }
            
            public void showAndroid(){
                String info = "来自手机内的内容!!!";
                webView.loadUrl("javascript:show('"+info+"')");
            }
            
            public String getInfo(){
                return "获取手机内的信息!!";
            }
        }
    

    接下来就是在js脚本中的书写,android中,重要的就这些使用方法,当然还有很多,直说传递用的方法。其他忽略

    下面,一个完整的例子:

    JavaScript中的书写:

     <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>调用Android组件测试</title>
    <script type="text/javascript">
        function show(info){
            document.getElementById("shows").innerHTML = info;
        }
    </script>
    </head>
     
    <body>
    <b>测试</b>
    <br />
    <button onClick="window.hello.javaMethod('param')">启动hello world Activity</button>
    <br />
    <hr  color="#99FF00"/>
    <button onClick="window.hello.showAndroid()">显示android内容</button>
    <br />
    <textarea id= "shows"  cols="20" rows="10"> 暂无记录 </textarea>
    <br />
     
    </body>
    </html>
    

    安卓中的书写:

    public class MainActivity extends ActionBarActivity {
     
     
        //private static final String URL = "http://shouji.baidu.com/";
        private static final String URL = "file:///android_asset/helloworld.html";
        private WebView webView;
        public String tag = "MainActivity";
        private Context mContext;
        
        @SuppressLint("JavascriptInterface") 
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            
            //this.requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_main);
            // 进行全屏
     
     
            mContext = this;
            this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
            webView = (WebView) this.findViewById(R.id.wv);
     
     
            webView.loadUrl(URL);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.addJavascriptInterface(new JSHook(), "hello");
            webView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    Log.d(tag, " url:"+url);
                  view.loadUrl(url);// 当打开新链接时,使用当前的 WebView,不会使用系统其他浏览器
                    return true;
                } 
            });
        }
      
        public class JSHook{
            @JavascriptInterface
            public void javaMethod(String p){
                Log.d(tag , "JSHook.JavaMethod() called! + "+p);
            }
            @JavascriptInterface
            public void showAndroid(){
                final String info = "来自手机内的内容!!!";
                MainActivity.this.runOnUiThread(new Runnable(){
                    @Override
                    public void run() {
                        webView.loadUrl("javascript:show('"+info+"')");
                    }
                });
            }
            public String getInfo(){
                return "获取手机内的信息!!";
            }
        }
        @Override 
        //设置回退  
        //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法  
        public boolean onKeyDown(int keyCode, KeyEvent event) {  
            if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {  
                webView.goBack(); //goBack()表示返回WebView的上一页面 
                this.finish();
                return true;  
            }  
            return false;  }
     
     
    }
     
    public class JSHook{
            public void javaMethod(String p){
                Log.d(tag , "JSHook.JavaMethod() called! + "+p);
            }
            
            public void showAndroid(){
                String info = "来自手机内的内容!!!";
                webView.loadUrl("javascript:show('"+info+"')");
            }
            
            public String getInfo(){
                return "获取手机内的信息!!";
            }
        }
    

    注意的问题:!!!!!!!!!!!!!!!!!!!!
    上面这段代码在android4.4版本及之前是没有问题的, 4.4之后就会出现以下两个异常错误: 07-10 10:25:21.417: I/chromium(27333): [INFO:CONSOLE(19)] "Uncaught TypeError: Object [object Object] has no method 'showAndroid'", source: file:///android_asset/helloworld.html (19)
    解决方法:在js调用方法上面加注解@JavascriptInterface

    07-10 10:42:58.437: I/chromium(27621): [INFO:CONSOLE(19)] "Uncaught Error: Error calling method on NPObject.", source: file:///android_asset/helloworld.html (19)
    解决方法:在对界面进行修改时必须在UI线程进行,即便它是Html的界面,因此在出现这个错误的时候可以用handler或runOnUiThread()方法去执行更新UI操作。 注:实例代码是排除了在高版本中出现异常的最终代码。

    异常原因: webview允许JavaScript 控制宿主应用程序,这是个很强大的特性,但同时,在4.2的版本前存在重大安全隐患,因为JavaScript 可以使用反射访问注入webview的java对象的public fields,在一个包含不信任内容的WebView中使用这个方法,会允许攻击者去篡改宿主应用程序,使用宿主应用程序的权限执行java代码。因此4.2以后,任何为JS暴露的接口,都需要加 @JavascriptInterface 注解,这样,这个Java对象的fields 将不允许被JS访问。

    相关文章

      网友评论

        本文标题:Js Android 交互

        本文链接:https://www.haomeiwen.com/subject/yzpinftx.html