// 本文适用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可以被重写的特性

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

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

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

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐