angularJS APP中页面添加水印

最新推荐文章于 2023-11-17 15:41:02 发布

原创

最新推荐文章于 2023-11-17 15:41:02 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

在AngularJS应用中为特定页面添加水印，遇到document.body.height获取为0及appendChild不起作用的问题。解决方法是使用document.documentElement获取高度，并通过ng-repeat创建多个水印div，利用ng-style和pointer-events:none实现水印穿透效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APP的某些页面这边需要添加水印，网上找了找，发现这篇写得靠谱：用JavaScript实现网页动态水印-博客园。
直接copy到项目里，新建了个watermark.js，参照博客中直接函数调用的方法，发现有问题：

原来的document.body可以获取width，但是height是0；
angularJS项目跑出来html是有一定结构的，原文里的document.body.appendChild(oTemp)用起来貌似不起作用；

原代码是var mask_div = document.createElement(‘div’)新建个div，再appendChildren到body中。AngularJS中，打算用ng-reapeat来实现，将代码改造了下，将原来的div对象的属性，改成angularJS里ng-style的Json。结合div的穿透，将pointer-event:none也加了进去。

watermark.js代码：

function watermark(settings) {
   
   
    //默认设置
    var defaultSettings={
   
   
        watermark_txt:"text",
        watermark_x:20,//水印起始位置x轴坐标
        watermark_y:20,//水印起始位置Y轴坐标
        watermark_rows:20,//水印行数
        watermark_cols:20,//水印列数
        watermark_x_space:60,//水印x轴间隔
        watermark_y_space:50,//水印y轴间隔
        watermark_color:'#000000',//水印字体颜色
        watermark_alpha:0.25,//水印透明度
        watermark_fontsize:'18px',//水印字体大小
        watermark_font:'微软雅黑',//水印字体
        watermark_width:100,//水印宽度
        watermark_height:80,//水印长度
        watermark_angle:15,//水印倾斜度数
    };
    //采用配置项替换默认值，作用类似jquery.extend
    if(arguments.length===1&&typeof arguments[0] ==="object" )
    {
   
   
        var src=arguments[0]||{
   
   };
        for(var key in src)
        {
   
   
            if(src[key]&&defaultSettings[key]&&