ufologist · July 9, 2019 07:37
diff --git a/watermark.html b/watermark.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易水印</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
    }
    iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    </style>
 </head>
 <body>
    <iframe src="https://baidu.com"></iframe>
    <script>
    (function() {
    /**
     * 添加全屏水印
     * 
     * @param {string} text 水印文字
     * @see https://musicfe.cn/page/15
     */
    function appendFullPageMask(text) {
        // 水印样式
        var maskStyle = 'position:fixed;top:0;left:0;right:0;font-size:0;pointer-events:none;';
        var maskContentStyle = 'display:inline-block;width:20%;margin-bottom:80px;font-size:12px;color:#aaa;transform:rotate(-30deg);';

        // 水印容器元素
        var maskEl = document.createElement('div');
        maskEl.setAttribute('style', maskStyle);

        // 水印内容元素
        var maskContent = document.createElement('span');
        maskContent.setAttribute('style', maskContentStyle);
        maskContent.appendChild(document.createTextNode(text));
        maskEl.appendChild(maskContent);

        // 计算需要多少个水印内容才能铺满整屏
        var count = 0;
        document.body.appendChild(maskEl);
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        // 注意这里是非准确计算
        var maskContentWidth = maskContent.getBoundingClientRect().width;
        var maskContentHeight = maskContent.getBoundingClientRect().height;
        var col = Math.floor(windowWidth / maskContentWidth);
        var row = Math.ceil(windowHeight / maskContentHeight);
        count = col * row;
        document.body.removeChild(maskEl);
        maskEl.removeChild(maskContent);

        // 添加水印内容
        for (var i = 0; i < count; i++) {
            var maskContent = document.createElement('span');
            maskContent.setAttribute('style', maskContentStyle);
            maskContent.appendChild(document.createTextNode(text));
            maskEl.appendChild(maskContent);
        }
        document.body.appendChild(maskEl);
    }

    appendFullPageMask('帐号水印');
    })();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>简易水印</title>
	<style>
	html,
	body {
	height: 100%;
	margin: 0;
	}
	iframe {
	width: 100%;
	height: 100%;
	border: none;
	}
	</style>
	</head>
	<body>
	<iframe src="https://baidu.com"></iframe>
	<script>
	(function() {
	/**
	* 添加全屏水印
	*
	* @param {string} text 水印文字
	* @see https://musicfe.cn/page/15
	*/
	function appendFullPageMask(text) {
	// 水印样式
	var maskStyle = 'position:fixed;top:0;left:0;right:0;font-size:0;pointer-events:none;';
	var maskContentStyle = 'display:inline-block;width:20%;margin-bottom:80px;font-size:12px;color:#aaa;transform:rotate(-30deg);';

	// 水印容器元素
	var maskEl = document.createElement('div');
	maskEl.setAttribute('style', maskStyle);

	// 水印内容元素
	var maskContent = document.createElement('span');
	maskContent.setAttribute('style', maskContentStyle);
	maskContent.appendChild(document.createTextNode(text));
	maskEl.appendChild(maskContent);

	// 计算需要多少个水印内容才能铺满整屏
	var count = 0;
	document.body.appendChild(maskEl);
	var windowWidth = window.innerWidth;
	var windowHeight = window.innerHeight;
	// 注意这里是非准确计算
	var maskContentWidth = maskContent.getBoundingClientRect().width;
	var maskContentHeight = maskContent.getBoundingClientRect().height;
	var col = Math.floor(windowWidth / maskContentWidth);
	var row = Math.ceil(windowHeight / maskContentHeight);
	count = col * row;
	document.body.removeChild(maskEl);
	maskEl.removeChild(maskContent);

	// 添加水印内容
	for (var i = 0; i < count; i++) {
	var maskContent = document.createElement('span');
	maskContent.setAttribute('style', maskContentStyle);
	maskContent.appendChild(document.createTextNode(text));
	maskEl.appendChild(maskContent);
	}
	document.body.appendChild(maskEl);
	}

	appendFullPageMask('帐号水印');
	})();
	</script>
	</body>
	</html>