When the native APP Jump to H5 page, users often need to carry some information before practice stitching parameters H5 page in need of a jump address, and now exchange data through window.WebViewJavascriptBridge quietly.
This article from the perspective of H5 record interactive ideas:
1: Andrews ios environment and the environment a little bit different, we need to determine what the current environment, according to navigator.userAgent
2: APP is still different environment, need for compatibility Andrews determine if window.WebViewJavascriptBridge variable does not exist, you need to add Dom's WebViewJavascriptBridgeReady event listeners manually; ios also need to determine whether there is window.WebViewJavascriptBridge variable, if there continues to determine window. WVJBCallbacks variable, if still does not exist, manually assigned to H5 callback, then document.createElement ( 'iframe') is inserted in the document, then remove it.
3: After the above process is completed, [events] to register by WebViewJavascriptBridge variable so that APP can listen to and perform the appropriate action
4: 3 init process is required for the Andrew system, if it is Android, you need to call before registration event WebViewJavascriptBridge.init ()
Methods (Note: a page throughout the life cycle, only once init () otherwise it will error, my approach is to be judged by a global variable is initialized)
Here's the code:
//针对安卓和ios系统，对window.WebViewJavascriptBridge进行兼容性处理
function setupWebViewJavascriptBridge(callback) {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
//添加dom事件
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
callback(WebViewJavascriptBridge)
},
false
);
}
}
if (isiOS) {
console.log('isiOS')
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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
}//封装方法，key:跟原生定义好的要捕获的名称， callback：原生捕获后执行的回调，此处可以写H5的后续执行方法，params：对象，要传给原生的参数
var setupWebViewBridge = function (key, callback, params) {
setupWebViewJavascriptBridge(function (bridge) {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//自己定义的全局变量，用来判断当前页面中安卓系统是否进行过一次初始化，页面卸载时取消赋值
if (!window.hadCalledWindow_WebViewJavascriptBridge ) {
if (isAndroid) {
window.hadCalledWindow_WebViewJavascriptBridge = true
bridge.init(function (message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
if (responseCallback) {
console.log('JS responding with', data);
responseCallback(data);
}
});
}
}
bridge.callHandler(
key,
//安卓系统必须传一个参数，否则捕获不到，因此，默认传入一个_x_变量
JSON.stringify({
...params,
_x_: 1,
}),
callback
);
})
}Native APP, the registration method to capture:
bridge.registerHandler('jsbridge_showMessage', function (data, responseCallback) {
showResponse(data);
});
Only know so much. . . . . .
