1.1定义在一些B/S结构的应用系统中，有很多页面需要水印。常见的有公文制度和合同制度。人们经常关注给网站图片添加水印，却很少关注页面水印。刚去Google之后，关于页面水印的文章数量几乎为0。本文中，Runniu木马将与大家分享制作网页水印的经验。本文讨论了以下几种情况：添加水印的方法需要用Javascript来完成，需要在不影响现有功能的情况下，方便地添加到原页面。1.2预期目标就图片水印实现方案而言，我们预计至少包括以下目标：1。实现浮动半透明的图片水印；2.包含水印的页面的所有元素都是只读的(不可写)；3.在包含框架的页面中，可以控制任何子页面或父页面的水印生成；4.页面放大或缩小(调整大小)后，需要在保证页面不刷新的前提下重新创建。5.支持IE678浏览器。其他浏览器暂时不考虑。1.3渲染加密前：。

加密后：

您可以打开附件中的文件进行查看。2.步骤2.1中加密的基本思想是它是一个Javascript函数执行过程，所以首先要考虑用Javascript操作DOM对象的方式。在现有的HTML页面中，在Body节点下创建一个新的DOM对象。计算对象的长度和宽度，这确保滚动条不会在覆盖所有页面内容的同时生成。将对象覆盖在原始页面上，设置背景图像并使其透明。创建一个新的DOM元素：在文档对象中使用createElement方法。元素创建完成后，将其z-index设置为一个大整数，以确保它可以大于现有网页的最大z-index，从而完成“叠加”。计算新对象大小：使用三个DOM对象值：clientWidth、scrollHeight和clientHeight。水平滚动条一般不会出现在网页中，所以不使用scrollWidth。垂直滚动条很常见。要确保完全覆盖页面内容，请在没有滚动条出现时使用clientHeight，在滚动条出现时使用scrollHeight。设置透明度：使用Alpha值。是Alpha IE支持的css过滤器。2.2应变细节还有一个小细节非常有趣，如上所述，那就是调整大小的过程。想象一下，当一个页面以550px400px打开时，自然会产生一个大小为550px400px的水印。但是当用户最大化时，页面不会刷新，生成水印的功能也不会重新执行，所以之前产生的水印图像会太小。如下图所示。请注意，右侧和下侧没有水印。

为了应对这种情况，我们就需要对身体的onresize()函数进行处理。如果以前定义没有onresize()函数，则直接添加onresize()；如果以前有onresize()函数，则对之进行修改。 2.3 最终代码考虑到框架页面需要考虑的情况，该方法包括三个参数：目标页面对象、目标页面字符串、背景图片。复制代码代码如下：函数GetWadded(TargetObj，jpgUrl，TargetStr){ var window obj=TargetObj；var waterMarkPicUrl=jpgUrlvar controlWindowStr=TargetStrif(window obj。文件。GetElEMENTByID('水印')!=null)返回；var m='水印；var newMark=windowobj。文件。创建元素(' div ')；纽马克。id=m；纽马克。风格。位置='绝对'；纽马克。风格。zindex=' 9527纽马克。风格。top=' 0px纽马克。风格。left=' 0px新马克。风格。宽度=窗口对象。文件。尸体。客户端宽度；if(ParSeint(window obj。文件。尸体。滚动高度)ParSeint(窗口obj。文件。尸体。客户端高度)){新标记。风格。高度=窗口对象。文件。尸体。滚动高度；} else { NewMark。风格。高度=窗口对象。文件。尸体。客户身高；}纽马克。风格。背景图像=' URL(' waterMarkPicUrl ')'；newMark.style.filter='alpha(不透明度=50 ';windowobj。文件。尸体。append child(NewMark)；var markStr=' var sobj=' controlWindowStr '。文件。GetElementByID('水印');索比。风格。width=' controlWindowStr '。文件。尸体。客户端宽度；索比。风格。高度=' controlWindowStr '。文件。尸体。客户端高度；'；if(windowobj。文件。尸体。调整大小！=null){ var oldResiae=windowobj。文件。尸体。继续前进。tostring()；var oldresiaser=oldresiae。substr(oldresiae。indexof(' { ')1)；var oldresizer=oldresizer。substr(0，oldresizer。的最后一个索引(' } ')；old resizer=“；”markStrwindow obj。文件。尸体。onresize=new Function(old resizer)；} else { windowobj。文件。尸体。onresize=新函数(MarkStr)；} } 3 原有页面处理需要在原有的身体标签处加入一个装载方法。如：装载时的车身=' GetWadded(车窗，' watermark.jpg '，'本')' 4附件演示地址http://demo.jb51.net/js/js_wartermark/baidu_mark.htm附件下载http://xiazai.jb51.net/201003/yuanma/js_wartermark.rar