8-12 JS和客戶端通訊 - schema封裝-2 · JS高級面試題

~~~ (function (window, undefined) { // 調用 schema 的封裝 function _invoke(action, data, callback) { // 拼裝 schema 協議 var schema = 'myapp://utils/' + action; // 拼接參數 schema += '?a=a'; var key; for (key in data) { if (data.hasOwnProperty(key)) { schema += '&' + key + data[key] } } // 處理 callback var callbackName = ''; if (typeof callback === 'string') { callbackName = callback } else { callbackName = action + Date.now(); window[callbackName] = callback } schema += 'callback=callbackName'; // 觸發 var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = schema ; // 重要！ var body = document.body; body.appendChild(iframe); setTimeout(function () { body.removeChild(iframe); iframe = null }) } // 暴露到全局變量 window.invoke = { share: function (data, callback) { _invoke('share', data, callback) }, scan: function (data, callback) { _invoke('scan', data, callback) }, login: function (data, callback) { _invoke('login', data, callback) } } })(window); ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> <title>Document</title> </head> <body> <button id="btn1">掃一掃</button> <button id="btn2">分享</button> <script type="text/javascript" src="./invoke.js"></script> <script type="text/javascript"> // function invokeScan() { // window['_invoke_scan_callback_'] = function (result) { // alert(result) // } // var iframe = document.createElement('iframe') // iframe.style.display = 'none' // // iframe.src = 'weixin://dl/scan' // 重要！ // iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&k3=v3&callback=_invoke_scan_callback_' // var body = document.body // body.appendChild(iframe) // setTimeout(function () { // body.removeChild(iframe) // iframe = null // }) // } document.getElementById('btn1').addEventListener('click', function () { // invokeScan() window.invoke.scan({}, function () {}) }) document.getElementById('btn2').addEventListener('click', function () { window.invoke.share({ title: 'xxx', content: 'yyy' }, function (result) { if (result.errno === 0) { alert('分享成功') } else { alert(result.message) } }) }) </script> </body> </html> ~~~