統(tǒng)計(jì)廣告次數(shù)需求
今天朋友的項(xiàng)目遇到了個(gè)需求，需要統(tǒng)計(jì)廣告的點(diǎn)擊次數(shù)，其中最大的問題就是這個(gè)廣告在一個(gè)直接通過連接引入過來的 iframe 中。
不跨域的情況
如果不跨域，直接在點(diǎn)擊的時(shí)候發(fā)送到后臺(tái)數(shù)據(jù)，讓后臺(tái)記錄廣告點(diǎn)擊次數(shù)，然后在跳轉(zhuǎn)鏈接就可以。
廣告鏈接在跨域的 iframe 中
結(jié)構(gòu)如下圖
image
現(xiàn)在需要統(tǒng)計(jì)廣告的使用次數(shù)，但是又沒法操作跨域 iframe 中的 DOM 元素。
實(shí)現(xiàn)原理及方法
在 iframe 前面添加蒙層，然后在點(diǎn)擊蒙層的時(shí)候，觸發(fā)發(fā)送請(qǐng)求的方法，然后直接穿透過去，觸發(fā)到 a 鏈接的點(diǎn)擊事件。
// a.html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
div {
position: relative;
}
p {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: #ccc;
opacity: 0.5;
margin: 0;
}
.hide {
display: none;
}
</style>
<body>
<div id="mydiv">
<p id="myp"></p>
<h4>這是個(gè)title</h4>
<iframe src="b.html"></iframe>
<button id="btn">觸發(fā)iframe中的A標(biāo)簽</button>
</div>
</body>
<script>
window.onload = function() {
let myp = document.getElementById('myp')
myp.addEventListener('touchstart', function() {
console.log('像后臺(tái)發(fā)送請(qǐng)求')
myp.classList.add('hide');
setTimeout(function(){
myp.classList.remove('hide');
},300)
})
}
</script>
</html>
// b.html
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="mydiv">
<p>第二個(gè)HTML</p>
<a target="_blank">跳進(jìn)百度</a>
</div>
</body>
</html>
touchstart 是瞬間執(zhí)行的，當(dāng) touchstrat 執(zhí)行的時(shí)候直接隱藏掉這個(gè)蒙層，事件直接穿透，觸發(fā)到后面的事件，然后在瞬間讓蒙層在出現(xiàn)，防止之后點(diǎn)擊不會(huì)監(jiān)聽。
在 vue 項(xiàng)目中使用此方法，電腦調(diào)試會(huì)有問題，需要在手機(jī)中看效果。（ios 兼容性不好）
后記
這個(gè)方法只是短時(shí)間之內(nèi)想到的辦法，如果有其他更好的方法請(qǐng)大家多多留言指教
