JS设置水印监听被篡改

最新推荐文章于 2024-07-15 17:15:41 发布

小阿瑶来也

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量128

点赞数

分类专栏：强大的现代JS技术文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_61060043/article/details/133029847

版权

强大的现代JS技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在HTML文件中添加一个用于显示水印的容器元素，比如一个div:

<body>
    <div id="watermark"></div>
</body>

2.使用CSS对水印容器进行样式设置，使其显示为水印效果，并禁用鼠标事件和选中文本:

    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #watermark {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.5;
            font-size: 24px;
            color: rgb(133, 133, 133);
            z-index: 9999;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
    </style>

3.使用JavaScript来监听水印容器的变化，如果水印文本被更改，则重新加载水印。这里使用 MutationObserver 来监视水印容器的变化：

<script>
    var watermark = document.getElementById("watermark");
    // 创建水印
    function createWatermark() {
        watermark.innerText = "我是水印";
    }
    // MutationObserver用来监视 DOM 变动,DOM 的任何变动。比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (mutation.type === "characterData" && watermark.innerText !== "我是水印") {
                createWatermark();
            }
        });
    });
    //启动监听
    //characterData: true 表示监听目标节点及其子节点文本内容的变化。当目标节点的文本内容被修改时,MutationObserver 会触发相应的回调函数。
    //subtree: true 表示监听目标节点的所有后代节点的变化。当目标节点及其后代节点的任何属性或文本内容被修改时,MutationObserver 都会触发回调函数。
    // 这两个选项通常一起使用，以便观察目标节点及其子节点的任何文本内容的修改。
    observer.observe(watermark, { characterData: true, subtree: true });

    // 页面加载时创建水印
    createWatermark();
</script>