页面加水印防复制另存为_asp.net加水印资源-CSDN文库

共3个文件

js：2个

html：1个

5星 · 超过95%的资源需积分: 17 198 浏览量 2018-07-23 13:25:41 上传评论 1 收藏 35KB RAR 举报

在网页设计和开发中，对页面内容添加水印是一种常见的保护措施，主要目的是防止未经授权的复制、截图或另存为。水印可以是文本、图像或者其他视觉元素，它与页面内容融为一体，既起到了装饰作用，又增加了版权保护。在本案例中，我们将探讨如何使用纯JavaScript实现页面加水印防复制另存为的功能。我们需要了解JavaScript在网页中的作用。JavaScript是一种解释型的、基于原型的脚本语言，广泛用于网页和应用开发，能够动态地修改HTML、CSS和DOM（文档对象模型），为用户提供交互性丰富的用户体验。在防复制另存为的场景下，我们可以通过JavaScript监听用户的操作行为，如鼠标点击、键盘输入等，来实现相应的防护机制。 1. **添加水印**：在HTML中，水印通常通过CSS样式实现。我们可以在CSS中定义一个类，该类包含透明度较低的文字或图像，然后使用JavaScript动态地将这个类添加到页面的某个元素上，比如整个body。例如： ```css .watermark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; opacity: 0.5; font-size: 24px; text-align: center; color: rgba(255, 255, 255, 0.5); background-color: transparent; white-space: nowrap; transform: rotate(30deg); } ``` 2. **防复制**：JavaScript可以通过监听`copy`事件来阻止用户复制页面内容。在事件处理函数中，我们可以清空剪贴板数据或者返回`false`来取消默认的复制行为。 ```javascript document.addEventListener('copy', function(event) { event.preventDefault(); if (window.clipboardData) { // IE浏览器 window.clipboardData.setData('Text', ''); } else { event.clipboardData.clearData(); } }); ``` 3. **防另存为**：防止用户通过浏览器的“另存为”功能保存无水印的页面，这通常比较困难，因为浏览器本身提供了这样的功能，JavaScript无法完全阻止。但可以尝试在页面加载时，通过设置`meta`标签来改变页面的MIME类型，使其看起来不可下载。然而，这种方法并非绝对有效，经验丰富的用户可能能找到绕过的方法。 ```html <meta http-equiv="Content-Disposition" content="attachment; filename=untitled"> ``` 尽管JavaScript提供了这些防护手段，但它们并不是万能的。有经验的用户仍然可以使用开发者工具或其他技术来规避。因此，真正的版权保护还需要结合服务器端的控制、数字版权管理（DRM）系统以及法律手段，以达到最佳效果。在提供的压缩包文件"watermark"中，可能包含了实现上述功能的JavaScript代码示例。通过学习和理解这些代码，开发者可以更好地掌握如何在自己的项目中实现页面加水印和防复制功能。不过，应当注意，过于严格的防复制策略可能会影响用户体验，因此在实际应用中需谨慎权衡。

资源推荐

资源详情

资源评论

收起资源包目录

watermark.rar （3个子文件）

watermark

watermark.html 3KB

jquery.watermark.js 5KB

jquery-1.8.3.min.js 91KB

<html> <head> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script src="jquery.watermark.js" type="text/javascript"></script> <style type="text/css"> tbody#t_body tr{background:transparent;} .soso_selsect table tr{background:transparent;} input{background:transparent;} select{background:transparent;} textarea{background:transparent;} </style> <script type="text/javascript"> //禁止复制和右键另存为 function iEsc() { return false;} function iRec() { return true;} function DisableKeys() { if (event.ctrlKey || event.shiftKey || event.altKey) { window.event.returnValue = false; iEsc(); } } document.ondragstart = iEsc; document.onkeydown = DisableKeys; document.oncontextmenu = iEsc; if (typeof document.onselectstart != "undefined") document.onselectstart = iEsc; else { document.onmousedown = iEsc; document.onmouseup = iRec; } //添加水印 function addImage(){ var managerName = "水印"; $('body').watermark({ texts : [managerName], //水印文字 textColor : "#BFBFBF", //文字颜色 textFont : '16px 微软雅黑', //字体 width : 100, //水印文字的水平间距 height : 100, //水印文字的高度间距（低于文字高度会被替代） textRotate : -30 //-90到0，负数值，不包含-90 }); } </script> </head> <body onload="addImage()"> <p align="center">成绩表</p> <table border="2px" align="center" bordercolor="blue" width="600px" height="300px"> <tr align="center"> <td>项目</td> <td colspan="5" >上课</td> <td colspan="2" >休息</td> </tr> <tr align="center"> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr align="center"> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4">休息</td> </tr> <tr align="center"> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> <tr align="center"> <td>化学</td> <td>语文</td> <td>体育</td> <td>计算机</td> <td>英语</td> <td>计算机</td> </tr> <tr align="center"> <td>政治</td> <td>英语</td> <td>体育</td> <td>历史</td> <td>地理</td> <td>计算机</td> </tr> <tr align="center"> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td>英语</td> <td rowspan="2">休息</td> </tr> <tr align="center"> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> </table> </body> </html>

评论收藏

内容反馈