取巧快速加水印
收到个紧急需求,由于我们客户主要是学校。我们开发的主要是教学软件,但是也开发教学课件。这次就是交付的教学课件,用在别的系统上。学校提需求需要在课件上加水印。不知道是不是看了钉钉等软件带来的灵感,要斜斜的、整屏覆盖。
由于是已经交付的产品,不可能花大力气来修改课件,只能像办法取巧。我们的课件是弹窗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实现水印是一个不错的选择。