beforeunload 不支持 safari

UBT统计需要在页面离开的时候上报一些数据

平常可以用 beforeunload 事件

1
2
3
4
5
window.addEventListener('beforeunload', function (event) {
	//上报ubt
	window._track.push();

});

但是在 safari 浏览器里面这玩意不好用
此时可以使用 pagehide方法

1
2
3
4
5
6
window.addEventListener('pagehide方法', function (event) {
	if(window._track){
		//上报ubt
		window._track.push();
	}
});

综合一下就是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

//代码来自 https://github.com/amfe/lib-env/blob/master/src/browser.js?from=groupmessage&isappinstalled=0
var env = function(){
         _env = {};

         var ua = window.navigator.userAgent;
         var matched;

         if((matched = ua.match(/(?:UCWEB|UCBrowser\/)([\d\.]+)/))) {
             /**
              * @instance browser
              * @memberof _env
              * @property {String} name - 浏览器名称，比如UC/QQ/Firefox/Chrome/Android/Safari/iOS Webview/Chrome Webview/IE/IEMobile/unknown等
              * @property {Version} version - 浏览器版本号
              * @property {Boolean} isUC - 是否是UC浏览器
              * @property {Boolean} isQQ - 是否是QQ浏览器
              * @property {Boolean} isIE - 是否是IE浏览器
              * @property {Boolean} isIEMobile - 是否是IE移动版浏览器
              * @property {Boolean} isIELikeWebkit - 是否是IE兼容了Webkit特性的浏览器
              * @property {Boolean} isChrome - 是否是Chrome浏览器
              * @property {Boolean} isAndroid - 是否是Android的原生浏览器
              * @property {Boolean} isSafari - 是否是Safari浏览器
              * @property {Boolean} isWebview - 是否是iOS下的Webview或Android下Chrome的Webview
              */
             _env.browser = {
                 name: 'UC',
                 isUC: true,
                 version: matched[1]
             }
         } else if((matched = ua.match(/MQQBrowser\/([\d\.]+)/))) {
             _env.browser = {
                 name: 'QQ',
                 isQQ: true,
                 version: matched[1]
             }
         } else if ((matched = ua.match(/Firefox\/([\d\.]+)/))) {
             _env.browser = {
                 name: 'Firefox',
                 isFirefox: true,
                 version: matched[1]
             }
         } else if ((matched = ua.match(/MSIE\s([\d\.]+)/)) ||
                         (matched = ua.match(/IEMobile\/([\d\.]+)/))) {

             _env.browser = {
                 version: matched[1]
             }

             if (ua.match(/IEMobile/)) {
                 _env.browser.name = 'IEMobile';
                 _env.browser.isIEMobile = true;
             } else {
                 _env.browser.name = 'IE';
                 _env.browser.isIE = true;
             }

             if (ua.match(/Android|iPhone/)) {
                 _env.browser.isIELikeWebkit = true;
             }
         } else if((matched = ua.match(/(?:Chrome|CriOS)\/([\d\.]+)/))) {
             _env.browser = {
                 name: 'Chrome',
                 isChrome: true,
                 version: matched[1]
             }

             if (ua.match(/Version\/[\d+\.]+\s*Chrome/)) {
                 _env.browser.name = 'Chrome Webview';
                 _env.browser.isWebview = true;
             }
         } else if(!!ua.match(/Safari/) && (matched = ua.match(/Android[\s\/]([\d\.]+)/))) {
             _env.browser = {
                 name: 'Android',
                 isAndroid: true,
                 version: matched[1]
             }
         } else if(ua.match(/iPhone|iPad|iPod/)) {
             if(ua.match(/Safari/)) {
                 matched = ua.match(/Version\/([\d\.]+)/)
                 _env.browser = {
                     name: 'Safari',
                     isSafari: true,
                     version: matched[1]
                 }
             } else {
                 matched = ua.match(/OS ([\d_\.]+) like Mac OS X/);
                 _env.browser = {
                     name: 'iOS Webview',
                     isWebview: true,
                     version: matched[1].replace(/\_/, '.')
                 }
             }
         } else {
             _env.browser = {
                 name:'unknown',
                 version:'0.0.0'
             }
         }
         return _env;
     }();

	//在ios里面不支持beforeunload事件
	var eventName = (env.browser.isWebview && env.browser.name === "iOS Webview" || env.browser.name==='Safari' ) ? "pagehide" : "beforeunload";
	console.log(eventName);
	//页面关闭后上报数据
	window.addEventListener(eventName, function (event) {
		//上报ubt
		window._track.push();
	});