zhuohongkui
/
gaoyixia-pc


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe</title>
    <style>
      html,
      body {
        width: 100% !important;
        overflow: hidden !important;
        scrollbar-width: none;
      }
      body::-webkit-scrollbar {
        display: none;
      }
      #wrap {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="wrap"></div>
    <script>
      const wrap = document.querySelector("#wrap");
      let cover_value = "",
        loading = true;

      // 设置元素监听器
      let wrapOb = new MutationObserver((e) => {
        if (!loading) return;
        window.parent.postMessage(true);
        wrap.appendChild(createWatermark(cover_value));
        loading = false;
      });
      // 开始监听 wrap的子元素
      wrapOb.observe(wrap, { childList: true });

      window.addEventListener("message", (event) => {
        const { content, cover } = event.data;
        cover_value = cover;
        wrap.innerHTML = content;
      });
      // 创建水印
      function createWatermark(coverValue) {
        const wrap = document.querySelector("#wrap"),
          boxHeight = wrap.offsetHeight,
          boxWidth = wrap.offsetWidth,
          pageHeight = boxWidth / 0.7,
          nums = Math.floor(boxHeight / pageHeight),
          fontSize = parseInt(wrap.offsetWidth / 12),
          cover = document.createElement("div");
        cover.className = "cover";
        cover.style.height = boxHeight + "px";
        cover.style.lineHeight = fontSize + "px";
        cover.style.position = "absolute";
        cover.style.top = 0;
        cover.style.left = "50%";
        cover.style.display = "flex";
        cover.style.flexDirection = "column";
        cover.style.alignItems = "center";
        cover.style.justifyContent = "center";
        cover.style.transform = "translateX(-50%)";
        cover.style.pointerEvents = "none"; // 取消所有事件
        for (let i = 0; i < nums; i++) {
          let c = document.createElement("div");
          c.className = "cover";
          c.style.width = "max-content";
          c.style.height = boxHeight + "px";
          c.style.fontSize = fontSize + "px";
          c.style.transform = "rotateZ(315deg) scale(0.7)";
          c.style.color = "rgba(0, 0, 0, 0.05)";
          c.style.fontWeight = "bold";
          c.style.display = "flex";
          c.style.flexDirection = "column";
          c.style.alignItems = "center";
          c.style.justifyContent = "center";
          c.innerText = coverValue;
          c.style.pointerEvents = "none"; // 取消所有事件
          cover.appendChild(c);
        }
        return cover;
      }
    </script>
  </body>
</html>