今天做了一个水印防止消除的需求。我生成水印的方式是通过canvas中生成一张图片放在,body标签的背景图片。防消除用的就是MutationObserver去监听body标签中的属性是否变化,变化就重新生成水印。但是我在chrome浏览器测试取消背景图片这个样式的时候,会一直调用callback函数,这里就有点搞不明白了,希望大神能够解惑。
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<script src="js/jquery.waterMarker.js"></script>
<script>
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
var now = year+"-" + month + "-" + date + " " + h + ":" + m + "";
jQuery(function(){
waterMaker("huangshuo",now);
//此处callback函数会一直调用,影响浏览器性能
var callback = function (records) {
records.map(function (record) {
console.log('Previous attribute value: ' + record.oldValue);
var judge = record.oldValue + "";
var b = "background";
if(judge.match(b)){
waterMaker("huangshuo",now);
//mo.disconnect();
//mo.observe(element[0], options);
}
});
};
var mo = new MutationObserver(callback);
//var element = document.getElementById('#my_element');
var element = document.getElementsByTagName("body");
//alert(element[0])
var options = {
'attributes': true,
'attributeOldValue': true,
}
mo.observe(element[0], options);
})
</script>
<body>
<div class="waterMakertClass"></div>
</body>
</html>
if(judge.match(b)){
waterMaker("huangshuo",now);
//mo.disconnect();
//mo.observe(element[0], options);
}
你死循环了,怎么可能不一直调用呢,
你设一次背景图,就触发一次监视,你监视里又去设背景图,有了改动,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了。
你需要个判断,而不是每次都是单纯的监视到有变化就直接重新设,你需要判断这次的变化是你自己js设,还是客户端直接改dom导致的,过滤掉你的重设动作.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="waterMakertClass" ></div>
</body>
</html>
<script>
//标记
var isSelfChange = false;
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
var now = year + "-" + month + "-" + date + " " + h + ":" + m + "";
waterMaker("huangshuo", now);
var mo = new MutationObserver(function (records) {
console.log('callback');
if (isSelfChange) {
isSelfChange = false;
} else {
if (document.getElementsByTagName("body")[0].style.backgroundColor != 'antiquewhite') {
isSelfChange = true;
waterMaker("huangshuo", now);
}
}
});
mo.observe(document.getElementsByTagName("body")[0], {
'attributes': true,
'attributeOldValue': true,
});
function waterMaker(a, b) {
document.getElementsByTagName("body")[0].style.backgroundColor = 'antiquewhite';
}
</script>