Transfer: Javascript实现网页水印(非图片水印)

Transfer: Javascript实现网页水印(非图片水印)

1 概述

1.1 定义

      在一些B/S结构的应用系统中,有很多页面是需要有水印的。常见的就是公文系统、合同系统等。大家常常关注的是网站图片增加水印,而很少关注页面水印。刚去Google了一圈,关于页面水印的文章的数量为几乎为0. 本文中,流牛木马就与大家一起交流一下有关制作网页水印的心得。

    本文讨论以下的情形: 新增水印的方法需要用Javascript完成,并要求能够方便地加入到原有的页面中,不能影响到已有的功能。

1.2 预期目标

就图片水印实现方案来说,我们预期至少包括以下几个目标:

1. 实现悬浮、半透明的图片水印

2. 包含水印的页面,所有元素均为只读(不可写)

3. 在包含框架页面中,可以控制任意一个子页面或父页面的水印生成

4. 在页面放大、缩小(resize过程)后,需要在保证页面不刷新的前提下,重新生成适应页面大小的新水印,以保证所有内容都被水印覆盖,并且不会因水印图片范围过大而产生滚动条。

5. 支持IE6\7\8浏览器。暂不考虑其他浏览器。

1.3 效果图

加密前:

clip_image002

加密后:

clip_image004

可以打开附件里的文件进行查看。

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大小的水印。但当用户对它进行最大化时,页面没有刷新,不会重新执行生成水印的函数,那么以前生产的水印图片就太小了。

如下图所示的情况。请注意,它的右侧、下侧都是没有水印的。

clip_image006

了应对这种情况,我们就需要对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 οnlοad=”GetWaterMarked(window,’watermark.jpg’,’this’)”>

4 附件

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

 

_________________________________________________________________________________

 关于扩展到非IE浏览器:

 有很多朋友问起如何扩展到非IE浏览器。

 我文中有提到设置水印图片透明的方式,那是一种仅适用于IE的方式。要在其他浏览器中的设置图片透明,也是很容易的。  我还没有做测试,请各位看官自行参考这篇帖子:

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

转载于:https://www.cnblogs.com/OSoft/archive/2010/03/01/1675723.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110798.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Network 之二 Ethernet(以太网)中的 MAC、MII、PHY 详解[通俗易懂]

    Network 之二 Ethernet(以太网)中的 MAC、MII、PHY 详解[通俗易懂]结构  从硬件的角度看,以太网接口电路主要由MAC(MediaAccessControl)控制器和物理层接口PHY(PhysicalLayer,PHY)两大部分构成。如下图所示  但是,在实际的设计中,以上三部分并不一定独立分开的。由于,PHY整合了大量模拟硬件,而MAC是典型的全数字器件。考虑到芯片面积及模拟/数字混合架构的原因,通常,将MAC集成进微控制器而将PHY留在片外…

  • [数据库] 一文搞懂case when所有使用场景「建议收藏」

    [数据库] 一文搞懂case when所有使用场景「建议收藏」前几天,为了给产品分析当前用户数据结构,写sql的时候使用到了casewhen,今天来总结一下casewhen的使用方法,以此为戒,感觉写的不好请拍砖,感觉写的还可以,给哥们点个赞,或者回复一下,让我意识到我不是一个人在战斗,好了废话不多说了,进入正题。关于casewhen的使用情况,我总结下来有三种,第一、等值转换,第二、范围转换,第三、列转行操作。等值转换咱们在设计数据库的…

  • python django环境搭建_pip安装virtualenv

    python django环境搭建_pip安装virtualenvpython虚拟环境虚拟环境(virtualenvironment),它是一个虚拟化,从电脑独立开辟出来的环境。通俗的来讲,虚拟环境就是借助虚拟机来把一部分内容独立出来,我们把这部分独立出来的东西

  • QGIS使用之基本介绍和安装教程

    QGIS使用之基本介绍和安装教程今天,小崇想和大家介绍一下QGIS的基本知识。希望我们互相学习,共同进步!何为QGIS?QGIS(QuantumGIS)是一款免费的桌面GIS软件,可运行在Linux、Unix、MacOSX和Windows等平台。QGIS是基于Qt,使用C++开发的一个用户界面友好、跨平台的开源版桌面地理信息系统。它主要提供GIS数据的显示、编辑和分析、制图等功能。QGIS的主要特点有:(1)免费开源。(正版ArcGIS价格不菲)(2)支持PostGIS数据库。(3)支持从WMS,WFS服务器中获取

  • 邓白氏编码申请流程(最新)「建议收藏」

    邓白氏编码申请流程(最新)「建议收藏」1.公司做医疗行业APP开发,公司的苹果账号是个人账户级别,不能发布医疗类APP(PLA1.2)。需要升级到公司级别,联系了苹果客服400-670-1855,苹果的客服大部分的人的普通话都够呛,反正能理解意思,你一定要说你就是老板,报你老板的名字,然后客服给回复了一封邮件 按照邮件如实给苹果回复邮件即可(没有邓白氏编码是不行的)。然后后续的升级方法步骤就不赘述了,苹果客服会一步步提示你的,…

    2022年10月23日
  • python中的变量命名规则

    python中的变量命名规则ThereareonlytwohardthingsinComputerScience:cacheinvalidationandnamingthings.在计算机科学领域只有两件难事:缓存失效和给东西起名字变量用的好或不好,和代码质量有着非常重要的联系,合理的使用变量,可以让你的代码可读性更高并且更加简洁。python中的变量命名规则1.变量命名2.变量命名的描述性3.变量名尽量短,但是不要太短4.合理使用变量5.变量定义尽量靠近使用6.合理使用namedtuple/

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号