说明：嵌入客户端中的H5页面，可能会出现需要与native交互的触发操作或传递数据的情况。在此说明一种实现方案，以供参考。
一、使用到第三方工具
二、使用方法
1、定义一个设备类型判断方法
//设备类型判断
function deviceType(){
var isIDevice = (/iphone|ipod/gi).test(navigator.platform),
isIDeviceIpad = (/ipad/gi).test(navigator.platform),
isAndroid = (/Android/gi).test(navigator.userAgent);
if ((isIDevice || isIDeviceIpad) && !isAndroid) {
return "isIos";
}else if(isAndroid){
return "isAndroid";
}
}
2、声明初始化方法
function setupWebViewJavascriptBridge(callback) {
if (deviceType()=="isIos") {
//ios监听window.WebViewJavascriptBridge
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)
} else if(deviceType()=="isAndroid"){
//安卓监听window.WebViewJavascriptBridge
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
}
3、调用初始化方法，并注册相关交互方法
setupWebViewJavascriptBridge(function(bridge) {
if(deviceType()=="isAndroid"){
//若果是安卓必须要注册bridge.init，用于接收客户端反馈
bridge.init(function(message, responseCallback) {});
}
// 获取分享按钮DOM
var weixinShareButton = document.getElementById("share_weixin");
// 绑定点击事件，与客户端交互
weixinShareButton.onclick = function(e) {
e.preventDefault();
//调用客户端方法
bridge.callHandler('nativeShare',
{'shareType': 'weixin'},
function(response) {
/* do something */
}
);
}
pyqShareButton.onclick = function(e) {
e.preventDefault();
bridge.callHandler('nativeShare',
{'shareType': 'pyq'},
function(response) {
/* do something 接收客户端响应*/
}
);
}
});
网友评论