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);
}
};
http://jsbin.com/nimilelote/edit?html,js,console,output
我们像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();
最新文章
- IFRAM随内部长宽高变化
- HDU 4941 Magical Forest(map映射+二分查找)杭电多校训练赛第七场1007
- 电赛总结(二)&mdash;&mdash;AD芯片总结之高速AD9224
- oracle 运维基础
- jQuery_效果(淡入淡出)
- android开发入门经验 ADT Bundle环境搭建
- uboot环境变量分析
- ASP.NET MVC 中将FormCollection与实体间转换方法【转】
- Oracle SQL 关键字
- 免费SSL证书PK付费SSL证书 花落谁家
- Python笔记(七):字典、类、属性、对象实例、继承
- flutter -------- ListView的使用
- mysql 开发进阶篇系列 3 SQL 优化(索引使用方法)
- 深度学习笔记(八)Focal Loss
- 《算法》第四章部分程序 part 8
- 【51Nod】1055 最长等差数列 动态规划
- eclipse 如何运行mavenWeb项目
- VS2013的IDE开发使用便捷实用技巧----(补充)
- 手动替换WORDPRESS的GOOGLE字体等加速【非插件】
- FTP、SFTP文件下载内容校验
热门文章
- elasticsearch索引路径规则
- LeetCode题解-23 合并K个排序链表 Hard
- 课程一(Neural Networks and Deep Learning),第一周(Introduction to Deep Learning)—— 1、经常提及的问题
- Netty核心概念(6)之Handler
- 【字符串】Reverse Words in a String(两个栈)
- Android4.0 Launcher拖拽原理分析
- LogCat里的错误提示 FATAL EXCEPTION: main
- SearchView去掉下划线
- webSQL的基本操作
- nginx 超时问题: upstream timed out (110: Connection timed out) while reading response header from upstream