Android/iOS 和js的交互的兼容性写法

// 本文适用Android和网页端的读者,iOS我不懂,本文的实现方式不涉及iOS(其实主要是为了兼容iOS那些简单的写法 摔!)

似乎iOS和网页的交互接口更多,要实现的js交互比Android更方便. 但是移动端开发经常出现WebView直接加载网页的方式,这时候js交互随着各种奇葩的需求就可能出现两边平台无法同时兼容一种js写法的情况。

下面列举我知道的几个方式达到一种js写法兼容Android/iOS平台的方式。或者,Android/iOS怎么兼容一种js写法的形式。(因为主要是Android端利用js的特性来实现的)。

情景一:js触发Android

iOS不懂,但是很方便,不管iOS中的实现了。Android需要注入js对象的方式才可以,并且网页中的写法也要求根据Android注入的对象来调用,但是这样无法兼容iOS,且写法太难看。(常规的Android调用js方法见官网实例)

实现方式:利用js可以被重写的特性

具体代码示例参见我在http://stackoverflow.com/的回答 http://stackoverflow.com/questions/20048914/override-current-javascript-functions-with-android-webview/32268192#32268192


情景二:Android调用js

这个太简单了吧? webview.load("javascript: jsFunction();");

略过...


情景三:Android获取网页中js变量

1). 获取网页标题

 js写法: document.title就可以了. 但是webview中拿不到document对象吧? 为难吧. 我教你.

实现技巧: 自己注入js函数并传参

示例代码: 

webView.addJavascriptInterface(new Object(){
        @JavascriptInterface
        public void getDocumentTitle(String title) {
            onGetDocumentTitle(title);
        }
    }, "native");   // 常规写法, 定义js 的native接口


@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);

    // 直接执行自己定义的native接口, 参数是document.title   webView.loadUrl("javascript:native.getDocumentTitle(document.title);");

}

看到了吧. 我在webview中拿不到document对象, 但是js中可以吧. 那我直接在js参数中处理就好了. 曲线救国啊...

2). 获取定义的js变量  直接在参数中"window.变量名"应该就拿到了


情景四:Android获取网页中js函数的返回值

这个其实算是情景二的举一反三的应用了。

实现技巧:利用js参数可以是js函数的特性

示例js代码:

function getA() {return "A";}

function printA(params) {alert(params);}

执行: printA(getA());    这个js写法是可以执行的(我在浏览器控制台测试的...)

同理: webview中可以这样写 loadUrl("javascript:native.printA(getA());");  // 我没测试, 不过估计没问题了...


有了情景二的写法,其他场景应该都可以用类似的思路了. 

文章写得很随意. 遇到的凑合看吧...

搜索关键词也不好定义. 常规的写法都知道...看到就是缘分,希望对读者有帮助.


你可能感兴趣的:(Android调用js方法,Android获取js返回值,Android重写js函数,Android和js交互,Android获取js变量)