/*
34 | * A Bridge Between H5 And Native.
35 | * By: Guokai @benbencc
36 | * Created: 2013-7-24
37 | * *//*
34 | * A Bridge Between H5 And Native.
35 | * By: Guokai @benbencc
36 | * Created: 2013-7-24
37 | * */面向Android和iOS的JS调用原理：
49 | 50 |Android 通过桥（客户端暴露在WebView全局对象下的一个对象，内挂各种API方法）
62 | 的方式进行调用，如window['Android_Bridge']['method'](JSON)。iOS通过自定
63 | 义Scheme（如native://method?data=JSON）方式调用。需要回调的接口需要将函
64 | 数名称在调用时一并传给客户端，同时将回调函数通过唯一名称挂在全局，待客户端
65 | 执行回调后移除该全局函数。
70 | (function() {Bridge是为H5和客户端交互通讯而产生的一个中间件，即一个JavaScript的SDK。负责 82 | 处理H5和客户端的方法调用、通信及H5页面自身的降级处理（非内嵌在客户端的情况）。
83 | 84 |
87 | var Bridge = function() {
88 | this.init.apply(this, arguments);
89 | };
90 |
91 | Bridge.prototype = {
92 | version: '0.0.1',桥初始化，初始化过程中会：主动探测UA，判断页面所属的生存环境，如果是在客户端中， 104 | 会探测获取客户端的平台类型和版本号，初始化消息队列，并主动探测网络类型，并同所属 105 | 环境主动握手交换双方所需的额外基础信息。
106 | 107 |
110 | init: function(bridgeName) {
111 | var that = this;
112 |
113 | that.platform = 'h5';
114 | that.bridgeName = bridgeName || 'ali_trip_webview_bridge';
115 | that.bridge = window[that.bridgeName];
116 | that.userAgentDetect.apply(this, arguments);
117 | that.messageQueueInit();
118 | that.deviceInfoDetect();
119 | that.connectionInfoDetect();
120 | that.handShake.apply(this, arguments);
121 |
122 | that.notification.superthat = that;
123 | },消息队列初始化，针对iOS的实现机制单独做的处理，iOS会主动轮询 135 | 消息队列中的操作，并批量取回处理。
136 | 137 |
140 | messageQueueInit: function() {
141 | var that = this;
142 |
143 | if(that.platform === 'ios') {
144 | window.messageQueue = [];
145 | window.messageQueueFetch = function() {
146 | var response;
147 | response = window.messageQueue.length ? JSON.stringify(window.messageQueue) : '';
148 | window.messageQueue = [];
149 |
150 | if(response) {
151 | return response;
152 | }
153 | };
154 | }
155 | },握手协议，用于页面同所属生存环境在首次初始化时进行基础信息交换。
167 | 168 |
171 | handShake: function(callback) {
172 | var that = this;
173 |
174 | that.pushBack('bridge:', 'ready', {
175 | data: {},
176 | successCallback: function() {
177 | callback && callback();
178 | }
179 | });
180 | },UA探测，用于检测当前页面是否生存在淘宝旅行客户端内，如果在客户端内 192 | 则继续获取客户端的平台类型及版本号用于后续的操作。
193 | 194 |User-Agent Format:
206 | 207 |Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; zh-cn; AliTrip/2.8.0) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile Safari/528.16 219 | Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; MI 2 Build/JRO03L; AliTrip/2.8.0) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile Safari/528.16
220 | 221 |References:
233 | 234 |http://www.ietf.org/rfc/rfc2616.txt 246 | http://www.useragentstring.com/
247 | 248 |
251 | userAgentDetect: function() {
252 | var that = this;
253 | var ua = navigator.userAgent;
254 | var match = ua.match(/AliTrip[\s\/][\d\.]+/igm);
255 |
256 | if(match) {
257 | that.platform = ua.match(/(iPad|iPhone|iPod)/igm) ? 'ios' : 'android';
258 | that.client.version = parseInt(match[0].match(/[\d\.]+/igm)[0].split('.').join(''));
259 | }
260 | },设备信息探测，用于检测当前页面的设备信息。
272 | 273 |
276 | deviceInfoDetect: function() {
277 | var that = this;
278 |
279 | if(that.platform === 'h5') {
280 | return;
281 | }
282 |
283 | that.pushBack('bridge:', 'client_info', {
284 | successCallback: function(client_info) {
285 | client_info = JSON.parse(client_info || '{}');
286 | client_info.version = that.client.version; //hack, android 3.6.0以下返回的字段缺失
287 | that.client = client_info; //ttid, push_token, device_id, client_version, client_type
288 | }
289 | });
290 | },网络类型探测，用于检测当前环境的页面类型，如果是生存在浏览器中，
302 | 则取浏览器的navigator.connection属性，如果生存在客户端中，则
303 | 根据协议接口进行获取，并作为桥的属性后续可被访问到。
{
317 | "type" : "2",
318 | "mapping": {
319 | "UNKNOWN": 0,
320 | "ETHERNET": 1,
321 | "WIFI": 2,
322 | "CELL_2G": 3,
323 | "CELL_3G": 4,
324 | "CELL_4G": 5,
325 | "CELL": 6,
326 | "NONE": 7,
327 | }
328 | }
329 |
333 | connectionInfoDetect: function() {
334 | var that = this;
335 |
336 | if(that.platform === 'h5') {
337 | that.connection = navigator.connection || {};
338 | return;
339 | }
340 |
341 | that.pushBack('bridge:', 'networktype', {
342 | successCallback: function(conn) {
343 | that.connection.type = conn;
344 | }
345 | });
346 | },
347 |
348 | sendURI: function(uri, newProxy) {
349 | var proxy = this.mClientProxy;
350 |
351 | if (newProxy) {
352 | this.buildProxy(uri);
353 | return this;
354 | }
355 |
356 | if (proxy || (proxy = document.querySelector('#J_MClientProxy'))) {
357 | proxy.attr('src', uri);
358 | } else {
359 | proxy = this.buildProxy(uri);
360 | }
361 |
362 | this.mClientProxy = proxy;
363 |
364 | return this;
365 | },
366 |
367 | buildRandom: function() {
368 | var that = this;
369 | var random = new Date().getTime() + '_' + parseInt(Math.random() * 1000000);
370 |
371 | return random;
372 | },
373 |
374 | buildProxy: function(uri) {
375 | var that = this;
376 | var guid = that.buildRandom();
377 | var iframeString = '<iframe id="J_MClientProxy_' + guid + '" class="hidden mclient-proxy" style="width:0;height:0;opacity:0;display:none;" src="' + uri + '"></iframe>';
378 | var proxy = $(iframeString);
379 |
380 | $('body').append(proxy);
381 | return proxy;
382 | },
383 |
384 | buildCallback: function(fn) {
385 | var that = this;
386 | var guid = that.buildRandom();
387 | var callbackName = 'Bridge_Callbacks_' + guid;
388 |
389 | window[callbackName] = (function(cb, callbackName) {
390 | return function() {
391 | cb.apply(this, arguments);
392 | delete window[callbackName];
393 | };
394 | })(fn, callbackName);
395 |
396 | return callbackName;
397 | },主要API，用于页面同客户端的协议回调，protocol协议默认为native:，
409 | 可以省略不传，host为协议约定的主体，如app/beep，data为调用时
410 | 传递给客户端的所需数据对象，对象内可包含successCallback和failCallback，
411 | 鉴于iOS回调的实现机制，newProxy参数是为了避免在iOS下多次连续回调
412 | 造成的消息丢失，当设为true时，每次均会创建一个新的iframe进行发送。
417 | pushBack: function(protocol, host, data, newProxy) {
418 | var that = this;
419 | var uri = (protocol || 'native:') + '//' + host + '?params=';
420 | var callbackName;
421 | var args = [].slice.call(arguments);
422 |
423 | if(typeof(protocol) !== 'string' || typeof(host) !== 'string') {
424 | protocol = 'native:';
425 | host = args[0];
426 | data = args[1];
427 | newProxy = args[2];
428 | uri = (protocol || 'native:') + '//' + host + '?params=';
429 | }
430 |
431 | if(that.platform === 'h5') {
432 | return;
433 | }
434 |
435 | data = data || {};
436 |
437 | for(var i in data) {
438 | if(data.hasOwnProperty(i)) {
439 | if(typeof(data[i]) === 'function') {
440 | callbackName = that.buildCallback(data[i]);
441 | data[i] = callbackName;
442 | }
443 |
444 | if(typeof(data[i]) === 'object' && data[i].hasOwnProperty('length')) {
445 | for(var j = 0; j < data[i].length; j++) {
446 | if(typeof(data[i][j]) === 'function') {
447 | callbackName = that.buildCallback(data[i][j]);
448 | data[i][j] = callbackName;
449 | }
450 | }
451 | }
452 |
453 | if(i !== i.replace(/([A-Z])/g,"_$1").toLowerCase()) {
454 | data[i.replace(/([A-Z])/g,"_$1").toLowerCase()] = data[i];
455 | delete data[i];
456 | }
457 | }
458 | }
459 |
460 | if(that.platform === 'android' && that.client.version < 360) {
461 | uri += encodeURIComponent(JSON.stringify(data));
462 |
463 | if(uri.match(/^native:\/\//igm)) {
464 | that.bridge && that.bridge['startNativeService'] && that.bridge['startNativeService'](uri);
465 | }
466 |
467 | if(uri.match(/^page:\/\//igm)) {
468 | that.bridge && that.bridge['startNativePage'] && that.bridge['startNativePage'](uri);
469 | }
470 |
471 | if(uri.match(/^bridge:\/\//igm)) {
472 | that.bridge && that.bridge['startNativeBridge'] && that.bridge['startNativeBridge'](uri);
473 | }
474 |
475 | return;
476 | }
477 |
478 | if(that.platform === 'android' && that.client.version >= 360) {
479 | uri += encodeURIComponent(JSON.stringify(data));
480 | prompt('alitrip-android://' + uri);
481 | return;
482 | }
483 |
484 | if(that.platform === 'ios') {
485 | uri += encodeURIComponent(JSON.stringify(data));
486 | messageQueue.push(uri);
487 | return;
488 | }
489 |
490 | uri += encodeURIComponent(JSON.stringify(data));
491 | that.sendURI(uri, newProxy);
492 | },
493 |
494 | getRequestParam: function(uri, param) {
495 | var value;
496 | uri = uri || window.location.href;
497 | value = uri.match(new RegExp('[\?\&]' + param + '=([^\&]*)(\&?)', 'i'));
498 | return value ? decodeURIComponent(value[1]) : value;
499 | },
500 |
501 | getRequestParams: function(uri) {
502 | var search = location.search.substring(1);
503 | uri = uri || window.location.href;
504 | return search ? JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) {
505 | return key==="" ? value : decodeURIComponent(value);
506 | }) : {};
507 | },获取URL和客户端传递的所有参数，会优先获取URL中的参数
519 | 520 |
523 | getParams: function() {
524 | var that = this;
525 | var params = that.getRequestParams();
526 | var client = that.client;
527 |
528 | for(var i in client) {
529 | if(client.hasOwnProperty(i) && params.hasOwnProperty(i)) {
530 | params[i] = client[i];
531 | }
532 | }
533 |
534 | return params;
535 | },
536 |
537 | notification: {alert弹框，对于浏览器的生存环境，仅message参数有效，但对于客户端类
549 | 生存环境，则可以接收回调，以及弹出框的标题和按钮文案，回调中客户端会回
550 | 传用户相应点击的按钮的索引值。
555 | alert: function(message, alertCallback, title, buttonLabels) {
556 | var that = this;
557 | var callback = function(ret) {
558 | var buttonIndex = ret.buttonIndex;
559 |
560 | if(Object.prototype.toString.call(alertCallback) === '[object Array]') {
561 | alertCallback[buttonIndex] && alertCallback[buttonIndex].apply(this, arguments);
562 | return;
563 | }
564 |
565 | alertCallback && alertCallback();
566 | };
567 |
568 | if(that.superthat.platform === 'h5') {
569 | alert.apply(null, arguments);
570 | return;
571 | }
572 |
573 | if(typeof(buttonLabels) === 'string') {
574 | buttonLabels = [buttonLabels];
575 | }
576 |
577 | that.superthat.pushBack('bridge:', 'alert', {
578 | message: message,
579 | successCallback: callback,
580 | title: title,
581 | buttonNames: buttonLabels
582 | });
583 | },confirm确认对话框，对于浏览器的生存环境，仅message和confirmCallback
595 | 参数有效，但对于客户端类生存环境，则可以接收回调，以及弹出框的标题和按钮
596 | 文案，回调中客户端会回传用户相应点击的按钮的索引值。
601 | confirm: function(message, confirmCallback, title, buttonLabels) {
602 | var that = this;
603 |
604 | if(that.superthat.platform === 'h5') {
605 | if(confirm.apply(null, arguments)) {
606 | confirmCallback && confirmCallback();
607 | }
608 |
609 | return;
610 | }
611 |
612 | if(typeof(buttonLabels) === 'string') {
613 | buttonLabels = [buttonLabels];
614 | }
615 |
616 | that.superthat.pushBack('bridge:', 'confirm', {
617 | message: message,
618 | title: title,
619 | successCallback: confirmCallback,
620 | buttonNames: buttonLabels
621 | });
622 | },prompt提示对话框，对于浏览器的生存环境，仅message、value和
634 | promptCallback参数有效，但对于客户端类生存环境，则可以接收回调，
635 | 以及弹出框的标题和按钮文案，回调中客户端会回传用户相应点击的按钮
636 | 的索引值。
641 | prompt: function(message, value, promptCallback, title, buttonLabels) {
642 | var that = this;
643 |
644 | if(that.superthat.platform === 'h5') {
645 | prompt.apply(null, arguments);
646 | return;
647 | }
648 |
649 | if(typeof(buttonLabels) === 'string') {
650 | buttonLabels = [buttonLabels];
651 | }
652 |
653 | that.superthat.pushBack('bridge:', 'prompt', {
654 | message: message,
655 | value: value,
656 | successCallback: promptCallback,
657 | title: title,
658 | buttonNames: buttonLabels
659 | });
660 | },弱提示，用于调用客户端的弱提示进行些许文案的提示。
672 | 673 |
676 | toast: function(message, milliseconds) {
677 | var that = this;
678 |
679 | if(that.superthat.platform === 'h5') {
680 | return;
681 | }
682 |
683 | that.superthat.pushBack('bridge:', 'toast', {
684 | message: message,
685 | milliseconds: milliseconds
686 | });
687 | },蜂鸣，调用客户端的蜂鸣器按照指定的次数进行蜂鸣。
699 | 700 |
703 | beep: function(times) {
704 | var that = this;
705 |
706 | that.superthat.pushBack('bridge:', 'beep', {
707 | times: times
708 | });
709 | },震动，进行设备的震动，持续指定的毫秒时长。
721 | 722 |
725 | vibrate: function(milliseconds) {
726 | var that = this;
727 |
728 | that.superthat.pushBack('bridge:', 'vibrate', {
729 | milliseconds: milliseconds
730 | });
731 | }
732 | },
733 |
734 | device: {},
735 |
736 | client: {},
737 |
738 | connection: {},新开页面打开页面，浏览器生存环境下打开新的标签页，客户端生存环境 750 | 下则调用系统浏览器打开相应新的页面。
751 | 752 |
755 | openBrowser: function(url) {
756 | var that = this;
757 |
758 | if(that.platform === 'h5') {
759 | window.open(url);
760 | return;
761 | }
762 |
763 | that.pushBack('bridge:', 'open_system_browser', {
764 | url: url
765 | });
766 | },针对iOS，跳转并打开AppStore的相应地址，对于浏览器而言则在新标签 778 | 中打开对应的应用地址。
779 | 780 |
783 | openAppStore: function(url) {
784 | var that = this;
785 |
786 | if(that.platform === 'h5') {
787 | window.open(url);
788 | return;
789 | }
790 |
791 | that.pushBack('bridge:', 'open_app_store', {
792 | url: url
793 | });
794 | },客户端生存环境下设置WebView顶部的标题显示文案，对于浏览器则直接 806 | 更改页面的标题文案。子标题为可选参数，只适用在客户端内嵌的情况。
807 | 808 |
811 | setTitle: function(title, subtitle) {
812 | var that = this;
813 |
814 | if(that.platform === 'h5') {
815 | document.title = title;
816 | return;
817 | }
818 |
819 | that.pushBack('bridge:', 'set_webview_title', {
820 | title: title,
821 | subtitle: subtitle
822 | });
823 | },跳转到相应的客户端页面，如果有额外的数据则通过ext参数传递给客户端。
839 | open: function(pagename, ext, successCallback, naviType, animeType) {
840 | var that = this;
841 | var params = {
842 | page_name: pagename,
843 | data: ext || {},
844 | successCallback: successCallback,
845 | naviType: naviType || 0,
846 | animeType: typeof(animeType) !== 'undefined' ? animeType : 4
847 | };
848 |
849 | that.pushBack('page:', 'goto', params);
850 | },返回上一页，对于浏览器而言，直接调用history.back返回上一个历史记录，
862 | 对于客户端而言则通过协议调用返回上一个WebView打开的相应页面。
867 | back: function(pagename, ext) {
868 | var that = this;
869 |
870 | if(that.platform === 'h5') {
871 | history.back();
872 | return;
873 | }
874 |
875 | if(pagename) {
876 | that.pushBack('bridge:', 'back', ext);
877 | return;
878 | }
879 |
880 | that.pushBack('bridge:', 'back', ext);
881 | },关闭当前的客户端页面，如果有额外的数据则通过ext参数传递给客户端。
897 | close: function(ext) {
898 | var that = this;
899 |
900 | if(that.platform === 'h5') {
901 | window.close();
902 | return;
903 | }
904 |
905 | that.pushBack('page:', 'close', ext);
906 | },客户端极简支付，如果有额外的数据则通过ext参数传递给客户端。
922 | minipay: function(alipayId, nextUrl, ext, successCallback, failCallback) {
923 | var that = this;
924 | var payResult;
925 | var params = {
926 | alipay_id: alipayId,
927 | data: ext || {},
928 | failCallback: failCallback,
929 | successCallback: function(ret) {
930 | try {
931 | payResult = JSON.parse(ret);
932 | } catch(e) {iOS客户端3.5版本返回的JSON格式有误，解析会出问题
944 | 945 | if(ret.match(/"ResultStatus":"9000"/igm)) {
948 | payResult = {
949 | ResultStatus: '9000'
950 | };
951 | }
952 | }iOS SDK返回的字段名首字母是大写，暂时兼容处理
964 | 965 | if(that.platform === 'ios') {
968 | payResult.resultStatus = payResult.ResultStatus;
969 | }
970 |
971 | if(payResult.resultStatus === '9000') {
972 | successCallback && successCallback(payResult);
973 | return;
974 | }
975 |
976 | failCallback && failCallback(payResult);
977 | }
978 | };
979 |
980 | if(that.platform === 'h5' && nextUrl) {
981 | window.location.href = nextUrl;
982 | return;
983 | }
984 |
985 | if(that.client.version < 350 && nextUrl) {
986 | window.location.href = nextUrl;
987 | return;
988 | }
989 |
990 | that.pushBack('bridge:', 'minipay', params);
991 | }
992 | };
993 |
994 | this.Bridge = Bridge;
995 |
996 | }).call(this);