webview内H5与原生安卓和IOS交互（互调方法/传值）

eling-

于 2019-09-09 15:14:20 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/100653980

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了如何在iOS和Android平台上，利用WebView实现与原生APP的双向通信。包括判断设备环境、从Webview向原生APP发送数据、以及调用原生APP提供的方法等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先获取设备环境：

var sUserAgent = navigator.userAgent.toLowerCase();
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";

2、webview发送方法给原生APP，原生APP内做出对应操作，可传值可不传值：

原生与前端协商好方法名：（sendData）

IOS：

var data = {    // 发送给原生APP的数据
    name:"yang",
    age:27
}
window.webkit.messageHandlers.sendData.postMessage(data);

安卓：

var data = {    // 发送给原生APP的数据
    name:"yang",
    age:27
}
App.sendData(data);    // APP这个对象名由安卓提供

3、webview调用原生APP提供的方法（先约定好方法名 getData）：

PS一下：直接在H5页面上写上这个方法，在方法内操作数据即可，无需执行：getData()

IOS：

function getData(data) {
    console.log(data)
}

安卓：

function getData(data) {
    console.log(data)
}