美文网首页
Android与JS交互之基本

Android与JS交互之基本

作者: Harrison_CSL | 来源:发表于2018-06-13 17:53 被阅读0次

    对于Android调用JS代码的方法有2种: 

    1. 通过WebView的loadUrl() 

    2. 通过WebView的evaluateJavascript()

    对于JS调用Android代码的方法有3种: 

    1. 通过WebView的addJavascriptInterface()进行对象映射 

    2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url 

    3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

    首先在activity获取到WebView可设置的对象 getSettings()方法,通过获取到的对象设置与JS交互的权限setJavaScriptEnabled(true)设置为true为可交互,默认为false,此外还可以设置是否允许JS进行弹窗口操作setJavaScriptCanOpenWindowsAutomatically(true)根据情况设置。

    加载js代码  : WebVIew.loadURL("file:///包名/类名.html"),其余都是死格式

    在mian包下面创建assets包,包里创建androidJs.html

    Carson_Ho functionclickprompt(){// 调用prompt()varresult=prompt("js://demo?arg1=111&arg2=222"); alert("demo "+ result);}

    Android与Js交互

    function androidJs(){

    document.getElementById("xx").innerHTML = "http://l23.l23l23.com/photoM/8546/01.jpg"

    }

    function androidJsTwo(x){

    document.getElementById("xx").innerHTML = x

    document.location = x

    return x;

    }

    function jsAndroid(){

    //prompt("Js调用了Android");

    document.location = "http://l23.l23l23.com/photoM/8546/01.jpg"

    JsCall.getMessage("http://l23.l23l23.com/photoM/8546/01.jpg");

    }

    <buuton onclick = “jsAndroid()” type = “button”>按钮</button>

    <p id = “XX”>在这里修改</p>


    以上准备工作做完了。

    Android调用JS

    方法一:

    1.当我们点击某的按钮时出发交互。还是通过WebView控件调用loadURL("javascript:方法名()")(在html里我们定义的方法名,方法分有参无参。就想我们java的方法一样。。如果是有参String类型的  ' '    用俩个单引号代替双引号)

    Button的点击事件里,调用了Js有参方法

    方法二:

    通过WebView控件调用evaluateJavascript("javascript:方法名", 实现ValueCallback接口)。在我们实现接口的同时会重写onReceiveValue方法,方法里有一个String value,value使我们的WebView的返回的结果。

    通过loadUrl方法交互时,会使页面刷新。方便简洁,效率低。

    通过evaluateJavascript交互时不会,效率高,Android4.4以上可以用

    以上我们的Android与JS交互就此结束。

    JS调用Android代码 三个方法:

    方法一:

    采用内部类的方法。通过 WebView的addJavascriptInterface()进行对象映射

    内部类继承Object ,创建方法,此方法是我们需要在JS里面进行调用的。

    然后调用addJavascriptInterface()方法,方法里需要俩个参数.

    参数一:内部了对象;参数二:String类型的值,就相当于我们给内部类起个变量名,然后在JS里通过这个值在JS里调用到方法。。。(即  值.内部类的方法())

    下面是那个内部类

    class JsAndAndroidextends Object {

    private Contextcontext;

    public JsAndAndroid(Context context) {

    this.context = context;

    }

    @JavascriptInterface

    //        次注解避免了漏洞攻击

            public void getMessage(final String msg) {

    Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();

    //            在这里更新UI的需要进行在主线程

                runOnUiThread(new Runnable() {

    @Override

                    public void run() {

    webView_Tv.setText(msg);

    Glide.with(MainActivity.this).load(msg).into(mImg);

    }

    });

    }

    }

    下面是html的代码

    大概就是这样。

    这里给大家说一下addJavaSCriptInterface()方法4.2之前和4.2之后(4.2之前有漏洞)。

    当JS拿到Android这个对象后,就可以调用这个Android对象中所有的方法,包括系统类(java.lang.Runtime 类),从而进行任意代码执行。就比如我们通过一个App扫描二维码打开一个WebView时候,我们的信息就可能会造成泄漏

    在Android4.2版本后出来了@JavascriptInterface

    您大可以放心因为我们采用了@JavascriptInterface这个注解对避免了漏洞的攻击

    在Android4.2之前:采用拦截prompt()进行漏洞修复。

    方法二:

    实现WebChromeClient接口,重写onJsAlert。这个方法主要是拦截弹框的方法 。实现接口重写方法 onJsPrompt、onJsAlert、onJsConfirm。方法。才用这个方

    法就我们需要在HTML里进行弹窗的操作

    在HTML里分这三种 alert()、confirm()、prompt()

    原理:Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调分别拦截JS不同的对话框 ,得到他们的消息内容,然后解析即可。

    方法三:

    实现WebViewClient接口,重写shouldOverrideUrlLoading()回调拦截Url

    具体原理: 

    Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url

    解析该 url 的协议

    如果检测到是预先约定好的协议,就调用相应方法 

    点击html按钮后将html里的网址图片加载到了Android。

    Js调Android代码总结:

    注意:这里只是说WebView是IOS主要使用的方式,并没有说Android不能使用。

    简单来说:

    Android调用JS:就是Android想要执行的代码交给JS去执行。

    JS调用Android:就是JS数据交给Android去执行。

    相关文章

      网友评论

          本文标题:Android与JS交互之基本

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