取巧快速加水印
收到个紧急需求,由于我们客户主要是学校。我们开发的主要是教学软件,但是也开发教学课件。这次就是交付的教学课件,用在别的系统上。学校提需求需要在课件上加水印。不知道是不是看了钉钉等软件带来的灵感,要斜斜的、整屏覆盖。
由于是已经交付的产品,不可能花大力气来修改课件,只能像办法取巧。我们的课件是弹窗iframe的方式在系统里加载的。
于是我的思路是这样的:
“系统iframeA” 加载 “中转水印iframeB”加载课件。
【iframeB.html】
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var url=location.href;
console.log(url);
var url_split="#my_go_url=";
if(url.indexOf(url_split)>0)
{
var url_arr=url.split(url_split);
var url_new=url_arr[1];
var shuiyin_html=`
<iframe src="${url_new}" allowfullscreen="true" style="position: fixed; z-index: 99999; width:100%; height:100%; border:0;"></iframe>
`;
var shuiyin_node = document.createElement("div");
shuiyin_node.innerHTML = shuiyin_html;
document.getElementsByTagName("body")[0].appendChild(shuiyin_node);
}else{
console.log('err');
}
</script>
</body>
</html>别人系统的代码不能改,又不想重新生成课件(课件其实不是由开发人员做的,是由多媒体制作人员,1个课件1个课件手动做的)。因此通过一个iframe实现水印是一个不错的选择。

