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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
使用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表单重复提交实现方法
2015/09/29 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python自定义一个异常类的方法
2019/06/27 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python 实现客户端与服务端的通信
2020/12/23 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
如何设置Java的运行环境
2013/04/05 面试题
新东网科技Java笔试题
2012/07/13 面试题
外包公司软件测试工程师
2014/11/01 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
董事长助理岗位职责
2014/02/18 职场文书
火箭队口号
2014/06/18 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python