1、拦截动态创建A标签进行的跳转
通常大部分站点会通过动态创建A标签来实现弹窗跳转链接,以绕过浏览器的一些弹窗拦截插件
export const openLink=(link,target='_blank')=>{
let domLink = document.createElement('a');
domLink.href=link;
domLink.setAttribute('target',target);
domLink.style.opacity=0;
domLink.style.zIndex=-999;
document.body.appendChild(domLink);
domLink.click();
setTimeout(()=>{
document.body.removeChild(domLink);
},200);
}
// 直接的用新窗口打开链接
openLink('https://www.baidu.com');
window.open()通常会被浏览器广告插件拦截
那针对以上的方案,我们可以用以下方法来拦截动态创建的A标签
var oldSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(name, value) {
// 发现利用target进行弹窗跳转的链接 这里进行一些非法判断后,修改href值,并拦截setAttribute的执行
if (this.tagName == 'A' && name =='target' ) {
this.href='javascript:;';
return;
}
// 无需拦截的情况下走正常的原始setAttribute
oldSetAttribute.apply(this, arguments);
};
2、监听DOM发生变化事件,以进行一些报警处理
var ob= new MutationObserver((m,e)=>{
m.forEach(i=>{
i.addedNodes.forEach(t=>{
if(t.tagName=='A'){
console.log('捕获到动态添加了A标签',t);
t.parentNode.removeChild(t);//这里可以进行移除也可以自己嵌入报警逻辑
}
})
})
});
ob.observe(document.body,{childList:true,subtree:true});