安全问题，需要给所有页面加水印

最近遇到一个需求，给所有页面加水印（登录人+登录时间），不影响其他点击等功能的使用，目的是防止信息外漏，当时就在想：这年头，PS就不说人人都能使用，谁手机还没个涂鸦功能，防不了，但是就是这么个需求

直接把代码复制到活字格
watermark(
{ watermarl_element: "pagesContainer",     //水印元素的id
watermark_txt: "水印内容",    //水印内容 }); 你只修改这里的代码将好了其他不要动

1. function watermark(settings) {
   
2.   //默认设置
   
3.   var defaultSettings = {
   
4.     watermarl_element: "body",
   
5.     watermark_txt: "",
   
6.     watermark_x: 20, //水印起始位置x轴坐标
   
7.     watermark_y: 20, //水印起始位置Y轴坐标
   
8.     watermark_rows: 2000, //水印行数
   
9.     watermark_cols: 2000, //水印列数
   
10.     watermark_x_space: 70, //水印x轴间隔
    
11.     watermark_y_space: 30, //水印y轴间隔
    
12.     watermark_color: "#aaa", //水印字体颜色
    
13.     watermark_alpha: 0.4, //水印透明度
    
14.     watermark_fontsize: "15px", //水印字体大小
    
15.     watermark_font: "微软雅黑", //水印字体
    
16.     watermark_width: 210, //水印宽度
    
17.     watermark_height: 80, //水印长度
    
18.     watermark_angle: 15, //水印倾斜度数
    
19.   };
    
20.   //采用配置项替换默认值，作用类似jquery.extend
    
21.   if (arguments.length === 1 && typeof arguments[0] === "object") {
    
22.     var src = arguments[0] || {};
    
23.     for (key in src) {
    
24.       if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
    
25.         continue;
    
26.       else if (src[key]) defaultSettings[key] = src[key];
    
27.     }
    
28.   }
    
29. 
    
30.   var oTemp = document.createDocumentFragment();
    
31. 
    
32.   var maskElement =
    
33.     document.getElementById(defaultSettings.watermarl_element) || document.body;
    
34. 
    
35.   //获取页面最大宽度
    
36.   var page_width = Math.max(maskElement.scrollWidth, maskElement.clientWidth);
    
37. 
    
38.   //获取页面最大高度
    
39.   var page_height = Math.max(
    
40.     maskElement.scrollHeight,
    
41.     maskElement.clientHeight
    
42.   );
    
43. 
    
44.   //水印数量自适应元素区域尺寸
    
45.   defaultSettings.watermark_cols = Math.ceil(
    
46.     page_width /
    
47.       (defaultSettings.watermark_x_space + defaultSettings.watermark_width)
    
48.   );
    
49.   defaultSettings.watermark_rows = Math.ceil(
    
50.     page_height /
    
51.       (defaultSettings.watermark_y_space + defaultSettings.watermark_height)
    
52.   );
    
53.   var x;
    
54.   var y;
    
55.   for (var i = 0; i < defaultSettings.watermark_rows; i++) {
    
56.     y =
    
57.       defaultSettings.watermark_y +
    
58.       (defaultSettings.watermark_y_space + defaultSettings.watermark_height) *
    
59.         i;
    
60.     for (var j = 0; j < defaultSettings.watermark_cols; j++) {
    
61.       x =
    
62.         defaultSettings.watermark_x +
    
63.         (defaultSettings.watermark_width + defaultSettings.watermark_x_space) *
    
64.           j;
    
65.       var mask_div = document.createElement("div");
    
66.       mask_div.id = "mask_div" + i + j;
    
67.       mask_div.className = "mask_div";
    
68.       //mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
    
69.       mask_div.innerHTML = defaultSettings.watermark_txt;
    
70.       //设置水印div倾斜显示
    
71.       mask_div.style.webkitTransform =
    
72.         "rotate(-" + defaultSettings.watermark_angle + "deg)";
    
73.       mask_div.style.MozTransform =
    
74.         "rotate(-" + defaultSettings.watermark_angle + "deg)";
    
75.       mask_div.style.msTransform =
    
76.         "rotate(-" + defaultSettings.watermark_angle + "deg)";
    
77.       mask_div.style.OTransform =
    
78.         "rotate(-" + defaultSettings.watermark_angle + "deg)";
    
79.       mask_div.style.transform =
    
80.         "rotate(-" + defaultSettings.watermark_angle + "deg)";
    
81.       mask_div.style.visibility = "";
    
82.       mask_div.style.position = "absolute";
    
83.       mask_div.style.left = x + "px";
    
84.       mask_div.style.top = y + "px";
    
85.       mask_div.style.overflow = "hidden";
    
86.       mask_div.style.zIndex = "9999";
    
87.       mask_div.style.pointerEvents = "none"; //pointer-events:none  让水印不遮挡页面的点击事件 //兼容IE9以下的透明度设置
    
88.       //mask_div.style.border="solid #eee 1px";
    
89.       mask_div.style.filter = "alpha(opacity=50)";
    
90.       mask_div.style.opacity = defaultSettings.watermark_alpha;
    
91.       mask_div.style.fontSize = defaultSettings.watermark_fontsize;
    
92.       mask_div.style.fontFamily = defaultSettings.watermark_font;
    
93.       mask_div.style.color = defaultSettings.watermark_color;
    
94.       mask_div.style.textAlign = "center";
    
95.       mask_div.style.width = defaultSettings.watermark_width + "px";
    
96.       mask_div.style.height = defaultSettings.watermark_height + "px";
    
97.       mask_div.style.display = "block";
    
98.       oTemp.appendChild(mask_div);
    
99.     }
    
100.   }
     
101.   maskElement.appendChild(oTemp);
     
102. }
     
103. 
     
104. watermark({
     
105.   watermarl_element: "pagesContainer",     //水印元素的id
     
106.   watermark_txt: "水印内容",    //水印内容
     
107. });

复制代码

你这个和网站上这个一模一样呀
https://blog.csdn.net/zz_chst/article/details/82760640

我也不会js，不过看起来代码可以搞定。

biubiubiu 发表于 2020-9-9 17:05
你这个和网站上这个一模一样呀
https://blog.csdn.net/zz_chst/article/details/82760640

正解~目前活字格没有页面加水印的基本功能，通过js代码应该可以实现。如果您会写js代码的话可以试试哦~

感谢大佬的支持~

谢谢

  watermarl_element: "pagesContainer",     //水印元素的id
  watermark_txt: "水印内容",    //水印内容
});

弱弱的问句，要在水印内容上面显示  登录账号 和登录时间怎么写，不懂，求大神指教

用户名用户名 发表于 2020-9-9 13:01
直接把代码复制到活字格
watermark(
{ watermarl_element: "pagesContainer",     //水印元素的id

watermark_txt: "水印内容",    //水印内容
});

弱弱的问句，要在水印内容上面显示  登录账号 和登录时间怎么写，不懂，求大神指教

lalalal 发表于 2020-9-11 18:23
watermarl_element: "pagesContainer",     //水印元素的id
  watermark_txt: "水印内容",    //水印内 ...

水印内容换成  

1. Forguncy.Page.getCell("user")

复制代码

感谢楼上的支持！
如果您的问题已解决，请及时更新帖子的状态为“已处理”，并设置最佳答案给有帮助到你的回复；
如果您的问题还未解决，欢迎跟帖补充；
如果您有新的问题，也欢迎创建新的求助帖。