說明：嵌入客戶端中的H5頁面，可能會出現需要與native交互的觸發操作或傳遞數據的情況。在此說明一種實現方案，以供參考。
一、使用到第三方工具
IOS?
二、使用方法
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 接收客戶端響應*/
}
);
}
});
