使用MutationObserver监控dom树实现水印的不可删除属性。

lifefriend_007 发布于2019-08-29 15:20 / 2364人阅读

摘要：有三个方法，分别是主要说方法，在实现水印不可删除的过程中主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。也就是说为的就是我需要监控的节点。

https://developer.mozilla.org...

MutationObserver 是一个观察对象，提供用来当DOM树发生变化时开发者可以根据发生的变化，进行逻辑的变化。
就像三体中的水滴一样，当地球上出现大型强子对撞研究时，会触发一定的逻辑来锁死地球的科学研究。

MutationObserver 有三个方法，分别是

observe( Node target, optional MutationObserverInit options );

disconnect();

takeRecords();

主要说observe()方法，在实现水印不可删除的过程中,主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。
先说第一种，observe( Node target, optional MutationObserverInit options )，接受两个参数，第一个是目标节点，第二个是目标节点需要被监控的属性，包括属性，子节点，甚至所有后代节点都可以监控。

  drawCanvas() {

        let divContainer = document.body.appendChild(document.createElement("div"));
        let waterMarkercanvas = document.createElement("canvas");
        let context = waterMarkercanvas.getContext("2d");

        divContainer.appendChild(waterMarkercanvas);
        divContainer.id = "divContainer"
        let backgroundUrl = null;

        divContainer.style.height = window.innerHeight + "px";
        divContainer.style.width = window.innerWidth + "px";


        waterMarkercanvas.width = this.option.canvasWidth;
        waterMarkercanvas.height = this.option.canvasHeight;



        context.font =this.option.font;
        context.textAlign = this.option.textAlign;
        context.fillStyle = this.option.textStyle;
        context.translate(waterMarkercanvas.width / 2,waterMarkercanvas.height / 2);
        context.rotate(this.option.degree * Math.PI / 180);
        context.fillText(this.option.text, 0, 0);

        backgroundUrl = waterMarkercanvas.toDataURL("image/png");
        divContainer.style.backgroundImage = `url(${backgroundUrl})`;


    }

在上面的代码里，我首先canvas画出来之后，转为png格式的图片，最后设置成了div的背景图片。

也就是说id为divContainer的div就是我需要监控的dom节点。这时我只需要

    canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            this.drawCnvas();
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer"), config);
    }

就可以实现在用户修改divContainer这个节点是实现canvas的重绘。

第二种，因为MutationObserver本山来讲，是不支持监控本本身节点的删除操作的，也就是说，我如果删除了divContainer这个节点，是无法实现canvas的重绘的。
那么，这时就需要到一个新的办法了，那就是监控body节点

    canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            console.log(mo.removeNodes)
            // this.drawCanvas();
            // console.log("detect canvas change and redraw")
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer").parentNode, config);
    }

因为在第一段代码中，我们把该节点作为了body节点的子节点，如果该节点变化，body节点的水滴肯定可以检测到，并且完成重绘。因为在我们的开发中，body节点承载着所有的页面内容，若删除body节点那么也就没有水印的意义了。
这时需要一个就需要一个MutationObserver()中的一个MutationRecord对象。

可以看到MutationObserver()有一个takeRecords函数来纪录监控中所有节点增查删改的操作，并且返回到MutationRecord对象中。

可以看到我执行了removeNode的操作并且被记录在了MutationRecord这个对象中。

canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            console.log(mo[0].removedNodes)
            // this.drawCanvas();
            // console.log("detect canvas change and redraw")
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer").parentNode, config);
    }

这是修改后的代码，我们只要匹配一个被删除的div和canvas的div是一致的就可以进行下一步的重绘操作了。

https://github.com/AplloBattl...

这是github地址。

服务器托管云服务器不可使用的邮箱域名 java菜单树的实现快照不可删除 html生成dom树

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113248.html

使用MutationObserver监控dom树实现水印的不可删除属性。

摘要：有三个方法，分别是主要说方法，在实现水印不可删除的过程中主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。也就是说为的就是我需要监控的节点。 https://developer.mozilla.org... MutationObserver 是一个观察对象，提供用来当DOM树发生变化时开发者可以根据发生的变化，进行逻辑的变化。就像三体中的水滴一样，当地球上出...

silencezwm 2019-08-22 17:07 评论0 收藏0
使用MutationObserver监控dom树实现水印的不可删除属性。

摘要：有三个方法，分别是主要说方法，在实现水印不可删除的过程中主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。也就是说为的就是我需要监控的节点。 https://developer.mozilla.org... MutationObserver 是一个观察对象，提供用来当DOM树发生变化时开发者可以根据发生的变化，进行逻辑的变化。就像三体中的水滴一样，当地球上出...

Chiclaim 2019-08-05 13:49 评论0 收藏0
使用MutationObserver监控dom树实现水印的不可删除属性。

摘要：有三个方法，分别是主要说方法，在实现水印不可删除的过程中主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。也就是说为的就是我需要监控的节点。 https://developer.mozilla.org... MutationObserver 是一个观察对象，提供用来当DOM树发生变化时开发者可以根据发生的变化，进行逻辑的变化。就像三体中的水滴一样，当地球上出...

mating 2019-08-02 10:25 评论0 收藏0
如何用vue封装一个防用户删除的平铺页面的水印组件

摘要：需求为了防止截图等安全问题，在项目页面中生成一个平铺全屏的水印要求水印内容为用户名，水印节点用户不能通过开发者工具等删除效果如上图在节点下插入水印节点，水印节点覆盖在页面最上层但不影响页面正常操作在通过或者用户通过开发者工具删除或修改水印节需求 showImg(https://segmentfault.com/img/remote/1460000017297879?w=1448&h=...

yagami 2019-08-23 13:56 评论0 收藏0
如何用vue封装一个防用户删除的平铺页面的水印组件

摘要：需求为了防止截图等安全问题，在项目页面中生成一个平铺全屏的水印要求水印内容为用户名，水印节点用户不能通过开发者工具等删除效果如上图在节点下插入水印节点，水印节点覆盖在页面最上层但不影响页面正常操作在通过或者用户通过开发者工具删除或修改水印节需求 showImg(https://segmentfault.com/img/remote/1460000017297879?w=1448&h=...

OldPanda 2019-08-05 15:40 评论0 收藏0