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());"); // 我没测试, 不过估计没问题了...

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

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

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

更多相关文章

随机推荐