基于之前公司的一些業(yè)務(wù)凑队,在此總結(jié)一下前端h5頁面與客戶端(iOS则果、Android)交互的一些場景。
一漩氨、app內(nèi)h5頁面與客戶端交互
嵌在app內(nèi)的h5頁面與客戶端交互首先要判斷是Android還是iOS西壮,之后根據(jù)客戶端定的方法,進行相應(yīng)的傳值叫惊。
html:
<button id="open">跳轉(zhuǎn)</button>
javaScript:
<script type="text/javascript">
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
document.getElementById('open').onclick = function () {
if (isiOS) {
// 跳轉(zhuǎn)app store
// window.location.href = "itms-apps://itunes.apple.com/app/search";
// 客戶端定的方法xxx茸时,跳轉(zhuǎn)app,并傳參數(shù)
// window.webkit.messageHandlers.xxx.postMessage(null);
window.webkit.messageHandlers.xxx.postMessage({
title: '標題',
content: '內(nèi)容',
url: 'http://www.baidu.com'
})
} else if (isAndroid) {
// 方法
// window.xxx.xxx();
}
}
</script>
二赋访、app外h5頁面與客戶端交互
app外的h5頁面通常就是喚醒app可都。