1 overview
1.1 Definition
In some B/s structure of the application system, there are many pages need to have a watermark. Common is the official Document system, contract system and so on. Everyone is often concerned about the Web site image to increase the watermark, but little attention to the page watermark. Just went to Google a lap, about the page watermark the number of articles is almost 0. This article, the flow of cattle Trojan horse with you to communicate about the production of web watermark experience.
This article discusses the following scenarios: The new watermark method needs to be done with JavaScript, and requires the ability to easily add to the original page, can not affect the existing functions.
1.2 Expected target
For image watermarking implementations, we expect to include at least the following goals:
1. Realizes the suspension, the translucent picture watermark
2. Pages containing watermarks, all elements are read-only (not writable)
3. In the Include frames page, you can control the watermark generation of any child page or parent page
4. In the page magnification, reduce (resize process), the need to ensure that the page does not refresh the premise, to adapt to the page size of the new watermark to ensure that all content is covered by watermarks, and will not be because the scope of the watermark image is too large to produce scroll bar.
5. Support Ie6\7\8 Browser. No other browsers are currently considered.
1.3 Effect Chart
Before encryption:
After encryption:
The
can open the files in the attachment to view them. The
2 Implementation Step
2.1 Basic Idea
Encryption process is a JavaScript function execution process, so we should first consider how to manipulate DOM objects with JavaScript.
in an existing HTML page, create a new DOM object under the Body node. The length and width of the object are calculated to ensure that the content of all pages is covered without the scroll bar. Overlay the object onto 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 the element is created, the Z-index is set to a large integer that guarantees it can be larger than the maximum z-index of the existing Web page to complete "overwrite".
Calculate new Object size:
leverages three DOM object values: ClientWidth, ScrollHeight, and ClientHeight.
A horizontal scroll bar is not normally present in a Web page, so scrollwidth is not used.
and the vertical scroll bar is very common.
to ensure that the page content is all covered, when the scroll bar is not present, use clientheight, and then use the scrollheight when the scroll bar appears.
Set Transparent:
Use alpha values. Alpha is the CSS filter supported by IE.
2.2 Contingency Details
There is a small detail is very interesting, the previous article also mentioned, is the resize process.
Imagine that when a page is open, it will naturally generate a watermark of 550pxx400px size 550pxx400px. But when the user maximizes it, the page is not refreshed and the function that generated the watermark is not rerun, so the previously produced watermark picture is too small.
The situation shown in the following illustration. Notice that there is no watermark on the right and bottom sides of it.
&NBSP
In response to this situation, we need to process the onresize () function of the body. If the onresize () function is previously defined, add onresize () directly, or modify it if the onresize () function is previously available.
2.3 Final code
takes into consideration the framework page, which includes three parameters: the target Page object, the target page string, and the background picture.
Copy Code code as follows:
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 original page Processing
You need to add an onload method to the original <body> label. Such as:
<body onload= "getwatermarked (window, ' watermark.jpg ', ' this ')" >
4 Accessories
Demo Address http://demo.jb51.net/js/js_wartermark/baidu_mark.htm
Attachment download
Http://xiazai.jb51.net/201003/yuanma/js_wartermark.rar
