公司需求，需要監聽谷歌點擊統計！
想了幾種方案：
方案一 事件委托（不可取）、
給iframe里面監聽方法，通過contentWindow 去執行事件委托；
這種方案，不可取～因為同源策略，iframe下面引入了谷歌的第三方的URL，出現了跨域問題；
除非你可以在廣告生成頁里面下個調用方法，來調取你當前頁寫的方法；
var ifr = document.querySelectorAll('iframe');
ifr.forEach(item =>{
let ctw = item.contentWindow;
ctw.addEventListener('click',function(e){
console.log(e.srcElement)
})
})
那給包裹廣告的ins標簽或者div標簽,監聽事件？
好像還是不行，iframe框架在當前頁面展示層，
方案二 事件穿透（不可取）、
在外層谷歌廣告外層添加一個遮罩，那么用戶點擊行為的時候，可以實現用戶行為采集，也是很棒的想法；
在廣告容器下面，做個div遮罩，<div class="mask" style="position:absolute;top:0px;right:0px;width:100%;height:100%;z-index:99;"></div>;
（1）、然后根據事件 mousedown -> mousemove -> mouseup -> click / touchstart -> touchmove -> touchend -> tap 的優先順序
（2）、或者用css3的 pointer-events:none用在mask上面
（3）、在遮罩下面綁定事件，從而觸發，這又回到第一個問題，跨域問題，谷歌廣告是不可能讓你寫方法的，那么這個方案又不行
方案三 輪訓與事件監聽（可取）
上面方案不行，總得找出一個出路解決監聽的方案～
不能動谷歌的ins\iframe的document,那么就去監聽當前頁，總可以吧～
這里用到了h5新增方法activeElement,這個是用來監聽當前執行元素
然后通過一個輪詢方法，監聽這個document.activeElement對象，做iframe匹配；
終於可以監聽到iframe這也是個進步，那么點擊谷歌廣告時，至少可以給你個響應，並且不報錯了
var IframeOnClick = {
istrack:null,
resolution: 200,
iframes: [],
interval: null,
Iframe: function() {
this.element = arguments[0];
this.cb = arguments[1];
this.hasTracked = false;
},
track: function(element, cb) {
this.iframes.push(new this.Iframe(element, cb));
if (!this.interval) {
var _this = this;
this.interval = setInterval(function() {
_this.checkClick();
}, this.resolution);
}
},
checkClick: function() {
if (document.activeElement) {
var activeElement = document.activeElement;
var tagName = activeElement.tagName;
for (var i in this.iframes) {
if (activeElement === this.iframes[i].element) {
if (this.iframes[i].hasTracked == false) {
this.iframes[i].cb.apply(window, []);
this.iframes[i].hasTracked = true; }
}
}
}
}
};
window.onload = function(){
var ifs = document.getElementsByClassName("iframe");
for (var i = 0; i < 12; i++) {
IframeOnClick.track(ifs[i], function() {
console.log("click")；
// 這里寫一些業務邏輯，例如給變量添加狀態
IframeOnClick.istrack = true;
});
}
}
接着講，只點擊谷歌廣告，還達不到監控是否點擊a標簽跳轉啊，要是點擊的空白處，也是返回的iframe對象，不是很尷尬；這個時候只能通過其他的方法，去到達a跳轉的效果；
配合方法h5新增方法，document.hidden 與 visibilityChangeEvent這個事件配合用，能監聽當前頁面是否是激活狀態，a標簽既然會跳轉頁面，那么當前頁面肯定就是非激活狀態；這時候配合上面方法；
（1）找到IframeOnClick下面的istrack，它是用來標記狀態的
（2）當點擊谷歌廣告並跳轉時，那么給這個IframeOnClick.istrack = true;
（3）在頁面非激活狀態下，通過判斷istrack這個變量，實現業務邏輯，例如ajax 當前的location值啊，獲或者獲取當前用戶IP，這些都是沒問題的；
（4）在頁面激活狀態，你得把istrack這個變量還原為 null, istrack = null;
排除點擊廣告沒跳轉，又點擊了你們自己的頁面鏈接出現錯誤數據統計
// 判斷是否在當前頁面
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if (!document[hiddenProperty]) {
console.log('頁面非激活');
if(IframeOnClick.istrack){
//執行你要的邏輯
}
}else{
console.log('頁面激活')
IframeOnClick.istrack = null;
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
感謝大神們的分享，這里做個mark,方便以后自己看，如果有用，點個👍