前端网站水印
在实际开发中,我们页面的一些内容出于各种原因可能需要打上水印。而且只希望能在水印状态下观看
传统水印
在页面内增加一个元素,然后让这个元素带水印照片,然后充满整个内容页,这样在视觉效果上基本实现了水印的功能
例如:
也有一些插件也能够更便捷的给页面添加水印。
但是这些水印都有一个问题。比如懂行的打开元素检查器把水印元素去除掉,或者设置一些不可见的style属性。这样我们就失去了水印的效果,可能这不是我们想要的
MutationObserver 实现不可去水印
MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。
这个是dom3提供的一个接口,我们可以用来监测我们的dom的变化。
例如
let globalObserver = new MutationObserver(function (mutations) {//全局监测dom
//Do something
});
globalObserver.observe(document.querySelector('body'), {
childList: true
});
这样我们就是在监测body元素下,所有子节点的变化。
我们在页面内删掉一个元素试一试:
在removedNodes里面就会有我们刚刚操作删除的元素,还可以监测到其他的dom内容更改什么的,所以如果我们在页面中建立一个水印元素,然后对他进行监测,如果发生对水印元素正常显示产生威胁的操作时(比如把水印元素设置成display:none,或者直接在检查器里面删除),我们就可以进行页面重载,或者重新渲染准备好的水印元素。
这样我们就实现了内容真实的带上水印,而且不能被别人隐藏。
这里提供一个简单的水印实例
function createWater(init) {//样式元素可以自行配置
if (document.getElementById('watermark')) {
document.body.removeChild(document.getElementById('watermark'))
}
let canvas = document.createElement('canvas');
let globalObserver = null;
let observer = null;
document.body.appendChild(canvas);
canvas.id = 'watermark';
canvas.width = canvas.height = 1000;
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = 999;
canvas.style.position = 'fixed';
canvas.style.top = '0px';
canvas.style.left = "0px"
let watermark = document.querySelector('#watermark');
ctx = watermark.getContext("2d");
ctx.fillStyle = "transparent";
ctx.fillRect(0, 0, 1800, 1600);
//1. 使用`font`设置字体。
ctx.font = "50px serif";
//2. 使用`fillStyle`设置字体颜色。
ctx.fillStyle = "#00AAAA";
//3. 使用`fillText()`方法显示字体。
ctx.fillText("我的水印你删不掉", 50, 120);
globalObserver = new MutationObserver(function (mutations) {//全局监测水印状态
let MutationRecord = mutations[0];
console.log(mutations)
if (MutationRecord.type === 'childList' && MutationRecord.removedNodes.length > 0) {
let nodes = MutationRecord.removedNodes;
Array.prototype.map.call(nodes, (val, index) => {
if (val.tagName === "CANVAS" && val.id === 'watermark') {
globalObserver.disconnect();
observer.disconnect();
createWater();
}
});
}
});
globalObserver.observe(document.querySelector('body'), {
childList: true
});
observer = new MutationObserver(function (mutations) {//监测水印自身状态
observer.disconnect();
globalObserver.disconnect();
createWater();
});
observer.observe(document.querySelector('#watermark'), {
attributes: true,
childList: true,
subtree: true
});
};
感兴趣的可以试一试。
大佬勿喷
参考资料:
1: https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver