Javascript 网页水印(非图片水印)实现代码


Posted in Javascript onMarch 01, 2010

1 概述
1.1 定义
在一些B/S结构的应用系统中,有很多页面是需要有水印的。常见的就是公文系统、合同系统等。大家常常关注的是网站图片增加水印,而很少关注页面水印。刚去Google了一圈,关于页面水印的文章的数量为几乎为0. 本文中,流牛木马就与大家一起交流一下有关制作网页水印的心得。
本文讨论以下的情形: 新增水印的方法需要用Javascript完成,并要求能够方便地加入到原有的页面中,不能影响到已有的功能。
1.2 预期目标
就图片水印实现方案来说,我们预期至少包括以下几个目标:
1. 实现悬浮、半透明的图片水印
2. 包含水印的页面,所有元素均为只读(不可写)
3. 在包含框架页面中,可以控制任意一个子页面或父页面的水印生成
4. 在页面放大、缩小(resize过程)后,需要在保证页面不刷新的前提下,重新生成适应页面大小的新水印,以保证所有内容都被水印覆盖,并且不会因水印图片范围过大而产生滚动条。
5. 支持IE6\7\8浏览器。暂不考虑其他浏览器。
1.3 效果图
加密前:
Javascript 网页水印(非图片水印)实现代码 

加密后:

Javascript 网页水印(非图片水印)实现代码
可以打开附件里的文件进行查看。
2 实现步骤
2.1 基本构思
加密的过程是一个Javascript函数执行过程,所以我们首先应该考虑用Javascript操作DOM对象的方式。
在已有的HTML页面中,新建一个DOM对象在Body节点下。该对象的长、宽均经过计算,保证在覆盖全部页面内容的同时又不产生滚动条。将该对象覆盖到原有的页面之上,设置背景图,并设置为透明。
创建新DOM元素:
使用document对象里的createElement方法。创建元素后,设置它的z-index为一个大整数,保证它能够比已有网页的最大z-index大,才能完成“覆盖”。
计算新对象大小:
利用三个DOM对象值: clientWidth 、scrollHeight与clientHeight.
网页中一般不会出现横向滚动条,故不使用scrollWidth.
而纵向的滚动条就很常见了。
为了保证页面内容全部覆盖,在未出现滚动条的时候,使用clientHeight,出现滚动条后,则使用scrollHeight。
设置透明:
利用Alpha值。Alpha是IE支持的css filter。
2.2 应变细节
有一个小细节是很有意思的,前文也提过了,就是resize的过程。
试想,当一个页面打开的时候是550px×400px,那么自然会生成550px×400px大小的水印。但当用户对它进行最大化时,页面没有刷新,不会重新执行生成水印的函数,那么以前生产的水印图片就太小了。
如下图所示的情况。请注意,它的右侧、下侧都是没有水印的。
Javascript 网页水印(非图片水印)实现代码 
为了应对这种情况,我们就需要对body的onresize()函数进行处理。如果以前定义没有onresize()函数,则直接添加onresize();如果以前有onresize()函数,则对之进行修改。
2.3 最终代码
考虑到框架页面需要考虑的情况,该方法包括三个参数: 目标页面对象、目标页面字符串、 背景图片。

function GetWaterMarked(targetObj,jpgUrl,targetStr ) { 
var windowobj=targetObj; 
var waterMarkPicUrl=jpgUrl; 
var controlWindowStr=targetStr; 
if(windowobj.document.getElementById("waterMark") != null) 
return; 
var m = "waterMark"; 
var newMark = windowobj.document.createElement("div"); 
newMark.id = m; 
newMark.style.position = "absolute"; 
newMark.style.zIndex = "9527"; 
newMark.style.top = "0px"; 
newMark.style.left = "0px"; 
newMark.style.width = windowobj.document.body.clientWidth; 
if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) ) 
{ 
newMark.style.height = windowobj.document.body.scrollHeight; 
}else 
{ 
newMark.style.height = windowobj.document.body.clientHeight; 
} 
newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")"; 
newMark.style.filter = "alpha(opacity=50)"; 
windowobj.document.body.appendChild(newMark); 
var markStr = "var sobj ="+controlWindowStr+".document.getElementById('waterMark');sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;"; 
if(windowobj.document.body.onresize != null) 
{ 
var oldResiae = windowobj.document.body.onresize.toString(); 
var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1); 
var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}")); 
oldResiaeStr+=";"+markStr; 
windowobj.document.body.onresize = new Function(oldResiaeStr); 
} 
else 
{ 
windowobj.document.body.onresize = new Function(markStr); 
} 
}

3 原有页面处理
需要在原有的<body>标签处加入一个onload方法。如:
<body onload="GetWaterMarked(window,'watermark.jpg','this')">
4 附件
演示地址 http://demo.3water.com/js/js_wartermark/baidu_mark.htm
附件下载
http://xiazai.3water.com/201003/yuanma/js_wartermark.rar
Javascript 相关文章推荐
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
js瀑布流布局的实现
Jun 28 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
使用js获取QueryString的方法小结
Feb 28 #Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 #Javascript
jquery 最简单易用的表单验证插件
Feb 27 #Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 #Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 #Javascript
JavaScript 空位补零实现代码
Feb 26 #Javascript
javascript replace()正则替换实现代码
Feb 26 #Javascript
You might like
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
js日期联动示例
2014/05/02 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python 深度学习中的4种激活函数
2020/09/18 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
什么是servlet链?
2014/07/13 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Docker下安装Oracle19c
2022/04/13 Servers
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技