H5与安卓和ios通信

一、将方法挂载window上面

h5调用原生

安卓：window.native.getSign()

ios:    window.webkit.messageHandlers.getSign.postMessage('')

原生调用h5

window.onPage = function (data) {
  // 前端处理逻辑
}

二、引入JsBridge（安卓）或WebViewJavascriptBridge（iOS）库的方案

function setupWebViewJavascriptBridge(callback) {
//Andriod使用
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
// ios处理
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
//web定义一个funParam方法让app调用data接收app传过来的参数（uid token）
bridge.callHandler("handleShare", {
title:title,
subtitle:'',
desc:desc,
link:link,
imgUrl:imgUrl
},function(data) {
alert('分享成功')
});
})

不引入JsBridge（安卓）或WebViewJavascriptBridge（iOS）库的方案

function createIframeCall(url) {
setTimeout(function() {
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
document.body.removeChild(iframe);
}, 100);
}, 0);
}
createIframeCall('jsbridge://handleShare?title='+title+'&url='+link+'&desc='+desc+'&img='+imgUrl+'');

 封装

JsBridge = {
doCall: function(functionName, data, callback) {
var _this = this;
// 解决连续调用问题
if (this.lastCallTime && (Date.now() - this.lastCallTime) < 100) {
setTimeout(function() {
_this.doCall(functionName, data, callback);
}, 100);
return;
}
this.lastCallTime = Date.now();
data = data || {};
if (callback) {
$.extend(data, { callback: callback });
}
if (UA.isIOS()) {
$.each(data, function(key, value) {
if ($.isPlainObject(value) || $.isArray(value)) {
data[key] = JSON.stringify(value);
}
});
var url = Args.addParameter('youzanjs://' + functionName, data);
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
iframe.remove();
}, 100);
} else if (UA.isAndroid()) {
window.androidJS && window.androidJS[functionName] && window.androidJS[functionName](JSON.stringify(data));
} else {
console.error('未获取platform信息，调取api失败');
}
}
}
JsBridge.doCall("handleShare", {
title:title,
subtitle:'',
desc:desc,
link:link,
imgUrl:imgUrl
},function(data) {
alert('分享成功')
});

最后

以上就是眯眯眼夕阳为你收集整理的H5与安卓和ios通信的全部内容，希望文章能够帮你解决H5与安卓和ios通信所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。