Javascript實現網頁浮水印(非圖片浮水印)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

2 實現步驟
3 原有頁面處理
4 附件

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大，才能完成“覆蓋”。

計算新對象大小：

利用三個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方法。如：

4 附件

http://files.cnblogs.com/azure/%E6%B0%B4%E5%8D%B0.rar

_________________________________________________________________________________

關於擴充到非IE瀏覽器：

有很多朋友問起如何擴充到非IE瀏覽器。

我文中有提到設定浮水印圖片透明的方式，那是一種僅適用於IE的方式。要在其他瀏覽器中的設定圖片透明，也是很容易的。我還沒有做測試，請各位看官自行參考這篇文章：

http://dancewithnet.com/2009/09/06/css-opacity/

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More