1 概述
1.1 定義
在一些B/S結構的應用系統中，有很多頁面是需要有水印的。常見的就是公文系統、合同系統等。大家常常關注的是網站圖片增加水印，而很少關注頁面水印。剛去Google了一圈，關于頁面水印的文章的數量為幾乎為0. 本文中，流牛木馬就與大家一起交流一下有關制作網頁水印的心得。
本文討論以下的情形： 新增水印的方法需要用Javascript完成，并要求能夠方便地加入到原有的頁面中，不能影響到已有的功能。
1.2 預期目標
就圖片水印實現方案來說，我們預期至少包括以下幾個目標：
1. 實現懸浮、半透明的圖片水印
2. 包含水印的頁面，所有元素均為只讀(不可寫)
3. 在包含框架頁面中，可以控制任意一個子頁面或父頁面的水印生成
4. 在頁面放大、縮小(resize過程)后，需要在保證頁面不刷新的前提下，重新生成適應頁面大小的新水印，以保證所有內容都被水印覆蓋，并且不會因水印圖片范圍過大而產生滾動條。
5. 支持IE6\7\8瀏覽器。暫不考慮其他瀏覽器。
1.3 效果圖
加密前：
加密后：
可以打開附件里的文件進行查看。
2 實現步驟
2.1 基本構思
加密的過程是一個Javascript函數執行過程，所以我們首先應該考慮用Javascript操作DOM對象的方式。
在已有的HTML頁面中，新建一個DOM對象在Body節點下。該對象的長、寬均經過計算，保證在覆蓋全部頁面內容的同時又不產生滾動條。將該對象覆蓋到原有的頁面之上，設置背景圖，并設置為透明。
創建新DOM元素：
使用document對象里的createElement方法。創建元素后，設置它的z-index為一個大整數，保證它能夠比已有網頁的最大z-index大，才能完成“覆蓋”。
計算新對象大?。?/p>
利用三個DOM對象值： clientWidth 、scrollHeight與clientHeight.
網頁中一般不會出現橫向滾動條，故不使用scrollWidth.
而縱向的滾動條就很常見了。
為了保證頁面內容全部覆蓋，在未出現滾動條的時候，使用clientHeight，出現滾動條后，則使用scrollHeight。
設置透明：
利用Alpha值。Alpha是IE支持的css filter。
2.2 應變細節
有一個小細節是很有意思的，前文也提過了，就是resize的過程。
試想，當一個頁面打開的時候是550px×400px，那么自然會生成550px×400px大小的水印。但當用戶對它進行最大化時，頁面沒有刷新，不會重新執行生成水印的函數，那么以前生產的水印圖片就太小了。
如下圖所示的情況。請注意，它的右側、下側都是沒有水印的。
為了應對這種情況，我們就需要對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://files.cnblogs.com/azure/%E6%B0%B4%E5%8D%B0.rar
_________________________________________________________________________________
關于擴展到非IE瀏覽器：
有很多朋友問起如何擴展到非IE瀏覽器。
我文中有提到設置水印圖片透明的方式，那是一種僅適用于IE的方式。要在其他瀏覽器中的設置圖片透明，也是很容易的。 我還沒有做測試，請各位看官自行參考這篇帖子：
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
