快捷導(dǎo)航

Javascript 網(wǎng)頁(yè)水印(非圖片水印)實(shí)現(xiàn)代碼

更新時(shí)間：2010年03月01日 18:17:21 作者：

在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中，有很多頁(yè)面是需要有水印的。常見的就是公文系統(tǒng)、合同系統(tǒng)等。

1 概述
1.1 定義
在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中，有很多頁(yè)面是需要有水印的。常見的就是公文系統(tǒng)、合同系統(tǒng)等。大家常常關(guān)注的是網(wǎng)站圖片增加水印，而很少關(guān)注頁(yè)面水印。剛?cè)oogle了一圈，關(guān)于頁(yè)面水印的文章的數(shù)量為幾乎為0. 本文中，流牛木馬就與大家一起交流一下有關(guān)制作網(wǎng)頁(yè)水印的心得。
本文討論以下的情形：新增水印的方法需要用Javascript完成，并要求能夠方便地加入到原有的頁(yè)面中，不能影響到已有的功能。
1.2 預(yù)期目標(biāo)
就圖片水印實(shí)現(xiàn)方案來(lái)說(shuō)，我們預(yù)期至少包括以下幾個(gè)目標(biāo)：
1. 實(shí)現(xiàn)懸浮、半透明的圖片水印
2. 包含水印的頁(yè)面，所有元素均為只讀(不可寫)
3. 在包含框架頁(yè)面中，可以控制任意一個(gè)子頁(yè)面或父頁(yè)面的水印生成
4. 在頁(yè)面放大、縮小(resize過(guò)程)后，需要在保證頁(yè)面不刷新的前提下，重新生成適應(yīng)頁(yè)面大小的新水印，以保證所有內(nèi)容都被水印覆蓋，并且不會(huì)因水印圖片范圍過(guò)大而產(chǎn)生滾動(dòng)條。
5. 支持IE6\7\8瀏覽器。暫不考慮其他瀏覽器。
1.3 效果圖
加密前：

加密后：

可以打開附件里的文件進(jìn)行查看。
2 實(shí)現(xiàn)步驟
2.1 基本構(gòu)思
加密的過(guò)程是一個(gè)Javascript函數(shù)執(zhí)行過(guò)程，所以我們首先應(yīng)該考慮用Javascript操作DOM對(duì)象的方式。
在已有的HTML頁(yè)面中，新建一個(gè)DOM對(duì)象在Body節(jié)點(diǎn)下。該對(duì)象的長(zhǎng)、寬均經(jīng)過(guò)計(jì)算，保證在覆蓋全部頁(yè)面內(nèi)容的同時(shí)又不產(chǎn)生滾動(dòng)條。將該對(duì)象覆蓋到原有的頁(yè)面之上，設(shè)置背景圖，并設(shè)置為透明。
創(chuàng)建新DOM元素：
使用document對(duì)象里的createElement方法。創(chuàng)建元素后，設(shè)置它的z-index為一個(gè)大整數(shù)，保證它能夠比已有網(wǎng)頁(yè)的最大z-index大，才能完成“覆蓋”。
計(jì)算新對(duì)象大?。?
利用三個(gè)DOM對(duì)象值： clientWidth 、scrollHeight與clientHeight.
網(wǎng)頁(yè)中一般不會(huì)出現(xiàn)橫向滾動(dòng)條，故不使用scrollWidth.
而縱向的滾動(dòng)條就很常見了。
為了保證頁(yè)面內(nèi)容全部覆蓋，在未出現(xiàn)滾動(dòng)條的時(shí)候，使用clientHeight，出現(xiàn)滾動(dòng)條后，則使用scrollHeight。
設(shè)置透明：
利用Alpha值。Alpha是IE支持的css filter。
2.2 應(yīng)變細(xì)節(jié)
有一個(gè)小細(xì)節(jié)是很有意思的，前文也提過(guò)了，就是resize的過(guò)程。
試想，當(dāng)一個(gè)頁(yè)面打開的時(shí)候是550px×400px，那么自然會(huì)生成550px×400px大小的水印。但當(dāng)用戶對(duì)它進(jìn)行最大化時(shí)，頁(yè)面沒有刷新，不會(huì)重新執(zhí)行生成水印的函數(shù)，那么以前生產(chǎn)的水印圖片就太小了。
如下圖所示的情況。請(qǐng)注意，它的右側(cè)、下側(cè)都是沒有水印的。

為了應(yīng)對(duì)這種情況，我們就需要對(duì)body的onresize()函數(shù)進(jìn)行處理。如果以前定義沒有onresize()函數(shù)，則直接添加onresize()；如果以前有onresize()函數(shù)，則對(duì)之進(jìn)行修改。
2.3 最終代碼
考慮到框架頁(yè)面需要考慮的情況，該方法包括三個(gè)參數(shù)：目標(biāo)頁(yè)面對(duì)象、目標(biāo)頁(yè)面字符串、背景圖片。

復(fù)制代碼代碼如下:

 
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 原有頁(yè)面處理
需要在原有的<body>標(biāo)簽處加入一個(gè)onload方法。如：
<body onload="GetWaterMarked(window,'watermark.jpg','this')">
4 附件
演示地址 http://demo.jb51.net/js/js_wartermark/baidu_mark.htm
附件下載
http://xiazai.jb51.net/201003/yuanma/js_wartermark.rar

您可能感興趣的文章: