拦截动态创建A标签的弹窗跳转

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});