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的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
jQuery使用方法
Feb 04 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
Vue的编码技巧与规范使用详解
Aug 28 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
PHP实现的简单日历类
2014/11/29 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
js 学习笔记(三)
2009/12/29 Javascript
js中replace的用法总结
2013/12/27 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
Angular2库初探
2017/03/01 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
Python中一行和多行import模块问题
2018/04/01 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python super()函数使用及多重继承
2020/05/06 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
管理学院毕业生自荐信范文
2014/03/10 职场文书
房产代理公证处委托书
2014/04/04 职场文书
目标责任书范本
2014/04/16 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
中专生自荐信
2014/06/25 职场文书
法制演讲稿
2014/09/10 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
浅谈JavaScript作用域
2021/12/06 Javascript
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis