MutationObserver助力页面水印

2024-02-25 13:05:44

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

背景

大家平时在开发中或者在面试中，难免都会遇到一个问题——给页面加水印，其实这并不难，但是也是有一些小技巧在里面的。今天我就来给大家分享一下我平时是怎么给页面加水印的。

正文

1. MutationObserver简介

MutationObserver是JavaScript中用于监听DOM变动的API，它可以在页面发生变化时触发回调函数。MutationObserver的用法非常简单，只需要创建一个MutationObserver实例，然后将它绑定到要监听的元素上即可。

const observer = new MutationObserver((mutations, observer) => {
  // 在这里处理DOM变动
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

2. 利用MutationObserver实现页面水印

我们可以利用MutationObserver来实现页面水印功能。具体步骤如下：

创建一个MutationObserver实例，并将它绑定到document.body元素上。
在MutationObserver的回调函数中，获取当前页面的内容，并在其中添加水印。
将带有水印的页面内容重新设置回document.body元素。

const observer = new MutationObserver((mutations, observer) => {
  const content = document.body.innerHTML;
  const watermark = '林三心';

  // 在页面内容中添加水印
  const newContent = `<div style="position: absolute; top: 0; left: 0; color: #999; font-size: 12px;">${watermark}</div>` + content;

  // 将带有水印的页面内容重新设置回document.body元素
  document.body.innerHTML = newContent;
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});