前端与客户端交互

基于之前公司的一些业务，在此总结一下前端h5页面与客户端（iOS、Android）交互的一些场景。

一、app内h5页面与客户端交互

嵌在app内的h5页面与客户端交互首先要判断是Android还是iOS，之后根据客户端定的方法，进行相应的传值。

html:

<button id="open">跳转</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) {

            // 跳转app store

            // window.location.href = "itms-apps://itunes.apple.com/app/search";

            // 客户端定的方法xxx，跳转app，并传参数

           // window.webkit.messageHandlers.xxx.postMessage(null);

            window.webkit.messageHandlers.xxx.postMessage({

                title: '标题',

                content: '内容',

                url: 'http://www.baidu.com'

            })

        } else if (isAndroid) {

           // 方法

         // window.xxx.xxx();

        }

    }

</script>

二、app外h5页面与客户端交互

app外的h5页面通常就是唤醒app。

参考链接：https://www.jianshu.com/p/e3d3939f5189