Javascript web page watermark (non-image watermark) implementation code _ javascript skills

In some bsstructured application systems, many pages require watermarks. Common examples are document systems and contract systems. 1 Overview
1.1 Definition
In some B/S architecture application systems, many pages require watermarks. Common examples are document systems and contract systems. We often focus on adding watermarks to website images, but on page watermarks. I just went to Google and found that the number of page watermarks is almost 0. In this article, I will share with you my experiences on making Web watermarks.
This article discusses the following situation: the method for adding a watermark must be completed in Javascript and must be easily added to the original page without affecting the existing functions.
1.2 expected goals
As for the image watermark implementation scheme, we expect at least the following goals:
1. Implement floating and translucent image watermarks
2. The page containing the watermark. All elements are read-only (not writable)
3. In the include frame page, you can control the watermark generation of any child or parent page.
4. after the page is zoomed in or out (resize process), you need to re-generate a new watermark to adapt to the page size without refreshing the page to ensure that all content is covered by the watermark, the scroll bar is not generated because the watermark image range is too large.
5. Supports IE6 \ 7 \ 8 browsers. Other browsers are not considered for the moment.
1.3
Before encryption:

After encryption:

You can open the file in the attachment for viewing.
2 implementation steps
2.1 Basic Ideas
The encryption process is a Javascript function execution process, so we should first consider using Javascript to operate DOM objects.
On the existing HTML page, create a DOM object under the Body node. The length and width of the object are calculated to ensure that the scroll bar is not generated while overwriting all the page content. Overwrite the object to the original page, set the background image, and set it to transparent.
Create a new DOM element:
Use the createElement method in the document Object. After an element is created, set its z-index to a large integer to ensure that it can be larger than the maximum z-index of an existing page to overwrite it ".
Calculate the size of the new object:
Use three DOM object values: clientWidth, scrollHeight, and clientHeight.
Generally, no horizontal scroll bar appears on the webpage, so scrollWidth is not used.
The vertical scroll bar is very common.
To ensure that all page content is overwritten, clientHeight is used when no scroll bar appears. scrollHeight is used when the scroll bar appears.
Transparent settings:
Use the Alpha value. Alpha is the css filter supported by IE.
2.2 strain details
There is a small detail that is very interesting. As mentioned above, it is the resize process.
If a page is opened with 550px × 400px, A 550px × 400px watermark is generated. However, when you maximize the watermark, the page is not refreshed and the watermark generation function is not re-executed. Therefore, the watermark image produced previously is too small.
As shown in. Note that No watermarks are available on the right and bottom of the image.

To cope with this situation, we need to process the onresize () function of the body. If the previous definition does not have the onresize () function, add onresize () directly. If the previous onresize () function exists, modify it.
2.3 final code
This method includes three parameters: Target Page Object, target page string, and background image.

The Code is as follows:

Function GetWaterMarked (targetObj, jpgUrl, targetStr ){
Var windowobj = targetObj;
Var waterMarkPicUrl = jpgUrl;
Var controlWindowStr = targetStr;
If(windowobj.doc ument. getElementById ("waterMark ")! = Null)
Return;
Var m = "waterMark ";
Var newMark = windowobj.doc ument. createElement ("p ");
NewMark. id = m;
NewMark. style. position = "absolute ";
NewMark. style. zIndex = "9527 ";
NewMark. style. top = "0px ";
NewMark. style. left = "0px ";
NewMark. style. width = windowobj.doc ument. body. clientWidth;
If (parseInt(windowobj.doc ument. body. scrollHeight)> parseInt(windowobj.doc ument. body. clientHeight ))
{
NewMark. style. height = windowobj.doc ument. body. scrollHeight;
} Else
{
NewMark. style. height = windowobj.doc ument. body. clientHeight;
}
NewMark. style. backgroundImage = "url (" + waterMarkPicUrl + ")";
NewMark. style. filter = "alpha (opacity = 50 )";
Windowobj.doc ument. 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.doc ument. body. onresize! = Null)
{
Var oldResiae = windowobj.doc ument. body. onresize. toString ();
Var oldResiaeStr = oldResiae. substr (oldResiae. indexOf ("{") + 1 );
Var oldResiaeStr = oldResiaeStr. substr (0, oldResiaeStr. lastIndexOf ("}"));
OldResiaeStr + = ";" + markStr;
Windowobj.doc ument. body. onresize = new Function (oldResiaeStr );
}
Else
{
Windowobj.doc ument. body. onresize = new Function (markStr );
}
}

3. original page processing
The originalAdd an onload Method to the tag. For example:

4 attachment
Demo address http://demo.jb51.net/js/js_wartermark/baidu_mark.htm
Attachment download
Http://xiazai.jb51.net/201003/yuanma/js_wartermark.rar