HTML5 MutationObserver检测页面劫持

好老没写博客了,业务直以变更,陆陆续续的做了无数web
app,被工作流淹没就老大少来机遇错过反思,前端技术提高这么的快,常常来种植不效则稳中有降的慌张,一种植技术还没有看清就涌出新的技能,然后一波人又由在各种规范去宣传,想偷懒都格外,大脑完全不足够用。

Nodejs,AngularJS,vuejs,React,grunt,gulp,webpack…Fuck!

HTML5的趟大挺大挺,感觉还有众多技艺没有打和行使。无意中发觉HTML5
DOM4级MutatioObserver方法,可以检查页面被的DOM是否发生变化,说交及时说不定大家知晓好用来涉及嘛了。

当真,前段时间我们相遇了web
app被运营商劫持的题目,不理解哪个环节出了问题,换了https按理说应该不见面再次出新,后来想到用类似GA统计的法门去统计页面是否让注入了js脚本或者iframe,然后经过日记去查看异常问题。

绑架问题无非就是是页面被改了,DOM结构发生变化了吃插入了有些广告。看到MutatioObserver方法有种豁然开朗的痛感,虽然非克迎刃而解吃绑票的问题,但是呢会查看被注入了呀,也算涨了耳目。

概述

 MutationObserver从字面上含义就是是发现突变。它好监听页面的DOM元素是否发了变更,然后被闹通知。

Constructor

MutationObserver()

new MutationObserver(callback)

callback,当每次DOM发生变化的时候还见面触发callback,大家或许就会咨询,那要是是屡屡修改dom,那这callback就会见频触发,性能及怎么收拾?实际上,MutationObserver并无是历次dom发生变化的时光就触发,还是顶具备的dom操作完后一律糟实施,也就是说它是异步的。

举个栗子:

<body>
  <ul id="container"></ul>
</body>

var callback=function(){
  console.log("Dom changed");
};
var mutationObserver=new MutationObserver(callback);
var otpions={
  subtree:true,
  childList:true
};
mutationObserver.observe(document.body,otpions);
window.onload=function(){
  for(var i=0;i<10;i++){
    var li=document.createElement("li");
    li.innerText="这是";
 document.getElementById("container").appendChild(li);
  }
};

咱比如说DOM元素中插入了10不行,实际上oberve只实行了一致不善,是于有着的dom操作完成以后触发的。

 

mutationObserver实例有三单道。

observe(target,options)
 //给制定的DOM注册一个轩然大波,如果DOM发生变化就见面发送通知。target是目标元素,比如body,options是布置哪写dom发生变化时才发送通知

disconnect();    //终止监听DOM变化,直到再次实例化

takeRecords()   //清除变动记录,即不再监听还并未发的DOM变化

 

observe实例化配置:

childList:设置为true表示监听指定元素的子元素的改动;

attributes:设置为true表示监听指定元素的习性之改;

characterData:设置也true表示监听指定元素的data变动;

subtree:设置也true表示未紧监听目标元素呢以监听其子元素变动;

attributeOldValue:在attributes性都设为true的前提下,如果需要将发生变化的特性节点前的属性值记录下来(记录及下MutationRecord对象的oldValue属性中),则设置为true;

characterDataOldValue:在characterData性都设为true的前提下,如果需要将发生变化的``characterData``节点之前的文件内容记录下来(记录及下面MutationRecord对象的oldValue属性中),则设置为true.

attributeFilter:一个性能名数组(不需要指定命名空间),只有该数组吃包含的属于性名发生变化时才会为考察到,其他名目的特性发生变化后会见吃忽略.

// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

// 选择目标节点
var target = document.querySelector('#some-id');

// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }

// 传入目标节点和观察选项
observer.observe(target, config);

// 随后,你还可以停止观察
observer.disconnect();

 

相关文章