美文网首页
前端利用DOM元素生成水印及防范

前端利用DOM元素生成水印及防范

作者: 无缘霸哥 | 来源:发表于2020-09-24 11:01 被阅读0次

index.html

<div id="container">
  <div id="water-mark"></div>
  <div id="content">
    <div>这是内容</div>
  </div>
</div>

index.css

#water-mark {
    pointer-events: none; 
    // 元素永远不会成为鼠标事件的target,解决水印覆盖在最上方,导致下层元素,无法执行鼠标事件
}
span {
    display: inline-block;
    width: 200px;
    transform: rotate(-15deg);
    position: absolute;
}

index.js

window.onload = function () {

    let waterMark = document.getElementById('water-mark');

    // MutationObserver  只会监听到内联样式的修改, 所以要把可能会导致水印看不见的相关样式写成内联样式

    waterMark.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.1);
    `;

    for (let i = 0; i < 8; i++) {

      for (let j = 0; j < 10; j++) {

        let span = document.createElement('span');

        span.innerText = '这是水印';

        span.style.top = 150 * i + 'px';

        span.style.left = 200 * j + 'px';

        span.style.display = 'inline-block';

        span.style.opacity = 1;

        span.style.color = 'rgba(0,0,0,.2)';

        waterMark.append(span)

      }

      // 这里与上方设置内联样式不一致,是为了让自己方便记忆两种设置的方法

    }
    const config = {childList: true, subtree: true, attributeFilter: ['style']};

    const callback = function (mutationsList) {

      for (let mutation of mutationsList) {

        if (// 这个if是判断这三种情况是修改了跟水印相关的DOM元素,其他的都是跟水印无关的

          mutation.target.id === 'water-mark' // 改变的DOM样式属性的是id为water-mark的元素

          || (mutation.removedNodes[0] && mutation.removedNodes[0].id === 'water-mark') // 装载水印的DOM被移除

          || mutation.target.offsetParent.id === 'water-mark' // 修改的当前元素是water-mark的子元素

        ) {

          console.log('水印被动了, 这里可以执行一下水印被动了之后的逻辑');

          if (mutation.type === 'childList') {

            console.log('A child node has been added or removed.');

          } else if (mutation.type === 'attributes') {

            console.log('The ' + mutation.attributeName + ' attribute was modified.');
          }
        }
      }
    };
    const observer = new MutationObserver(callback);

    //MutationObserver 只会监听子元素的删除,监听不到本身, 所以要添加的父元素上进行监听

    let container = document.getElementById('container');

    observer.observe(container, config);
  };

这是我当初做这个需求是遇到的问题,后来在高人的指点下解决了,为了加深自己的印象和今后方便回忆,就专门自己实现了一下,如果大家发现有什么地方不正确或者有更好的方法实现,欢迎大家留言区留言。

相关文章

  • 前端利用DOM元素生成水印及防范

    index.html index.css index.js 这是我当初做这个需求是遇到的问题,后来在高人的指点下解...

  • js无法动态生成的Dom元素

    前言 项目中往往需要动态生成Dom元素,如ajax动态取值后再生成元素,或者通过for循环生成一系列dom元素等等...

  • jQuery注意点

    1、jQuery元素转化为DOM元素 利用数组下标读取jQuery中的DOM对象 利用jQuery中自带的get(...

  • console 输出 DOM 对象

    背景 前端开发调试的时候,经常需要查看HTML DOM元素对象,如图所示: DOM元素对象包含了HTML DOM的...

  • 客户端渲染和服务端渲染的区别(转)

    服务端渲染:DOM树在服务端生成,然后返回给前端。 客户端渲染(SSR):前端去后端取数据生成DOM树。 服务端渲...

  • 前端水印生成

    导语:前段时间做某系统审核后台,出现了审核人员截图把内容外泄露的情况,虽然截图内容不是特别敏感,但是安全问题还是不...

  • 2.DOM:操作元素(innerText、innerHTML、属

    操作元素 ​ JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素...

  • 动态生成DOM元素的高度及行数获取与计算方法

    好程序员分享动态生成DOM元素的高度及行数获取与计算方法 在开发IM的项目过程中,经常会有出现一些需要计算DOM高...

  • React diff算法

    React根据JS对象构造的元素生成虚拟Dom树,对比虚拟Dom节点的变化来渲染真正的Dom树 因为传统Dom树的...

  • 前端生成pdf水印解决方案

    最近有需求需要做一个小工具:生成pdf水印的网页工具。一开始是想前端传递文件、水印文案给后端,然后由服务器生成,然...

网友评论

      本文标题:前端利用DOM元素生成水印及防范

      本文链接:https://www.haomeiwen.com/subject/yljzyktx.html