DOMNodeInserted顾名思义,可以监听某个 DOM 范围内的结构变化,这个特性只有在firefox的低版本和webkit中使用,IE不支持,这里我们可以作为低版本浏览器的兼容实现。
var validInsertImg = {
httpReg : /^http:\/\/(.*\.baidu\.com|.*\.netwin\.com)\//,
//验证非法图片
validIllegalityImg : function(src){
var httpReg = this.httpReg;
return !httpReg.test(src);
},
init : function(){
this.monitor();
},
monitor: function(){
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
var mutationObserverSupport = !!MutationObserver;
//html5监控变化属性
if(!mutationObserverSupport){
this.mutationListen(MutationObserver);
}else{
this.insertedListen();
}
},
insertedListen : function(){
var that = this;
document.addEventListener('DOMNodeInserted', function(e) {
var dom = e ? e.srcElement : document.documentElement;
if (!dom.outerHTML) {
return;
}
var imgList = (dom.nodeName.toUpperCase() == 'IMG') ? [dom] : dom.getElementsByTagName('img');
if (!imgList || imgList.length == 0) {
return;
}
for (var i = 0; i < imgList.length; i++) {
that.removeNode(imgList[i]);
}
});
},
mutationListen: function(MutationObserver){
var that = this;
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
var nodes = mutation.addedNodes;
for(var i = 0 ; i < nodes.length ; i++){
var node = nodes[i];
that.removeNode(node);
}
})
})
observer.observe(document, {
subtree: true,
childList: true
});
},
//删除node
removeNode : function(node){
if(node.nodeName.toUpperCase() == 'IMG'){
var src = node.src;
if(this.validIllegalityImg(src)){
node.parentNode.removeChild(node);
console.log('拦截可疑静态脚本:', node.src);
}
}
}
}
validInsertImg.init();
body = document.getElementsByTagName('body')[0];
var img = document.createElement('img');
img.setAttribute('src','http://m.baidu.com/img/b')
body.appendChild(img);
var img1 = document.createElement('img');
img1.setAttribute('src','/YTRYTRY/A.PNG')
body.appendChild(img1);