取巧快速加水印

野生程序猿-杂烧5年前随意分享1077

收到个紧急需求,由于我们客户主要是学校。我们开发的主要是教学软件,但是也开发教学课件。这次就是交付的教学课件,用在别的系统上。学校提需求需要在课件上加水印。不知道是不是看了钉钉等软件带来的灵感,要斜斜的、整屏覆盖。

由于是已经交付的产品,不可能花大力气来修改课件,只能像办法取巧。我们的课件是弹窗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实现水印是一个不错的选择。

标签: 水印

相关文章

egret升级版本后遇到的问题

升级完egret引擎版本后vscode项目启动不了了,关键是新的demo也启动不了。只能用egret run -a 启动。egret越来越离谱了,还发现了其他怪异问题。1、html5编译报错,提示“您...

如何判断一个经纬度是哪个省?

需求是这样的,有个卖gps防盗器的公司,需要分析出用户去年一年内经过了那些城市?假设有10万个用户,每个用户有100万个轨迹点。我们怎么分析呢?常规方法是一个点一个点的分析,那就是10w*100w=1...

GPS经纬度坐标系转换【js版】

万能的javascript版也来了,前端、后端nodejs都能用。<html> <body> <script>  /**   ...

nodejs简单实现端口映射(隧道)

nodejs简单实现端口映射(隧道)

来个万能的javascript代码,实现端口映射。前端electron桌面软件也可以用到。【port.js】var net = require('net'...

vue通过组件的方式制作教学软件翻牌游戏环节

vue通过组件的方式制作教学软件翻牌游戏环节

为了方便学生记忆学习,将记忆知识点做成了翻牌游戏形式。由于记忆点知识比较多,我们可以设计成多个关卡,每个关卡就是一些知识点配置,通过组件的形式加载,更为合理,更为方便。【fanpai.vue】<...

推荐一个前端框架Svelte(超级轻量级)

现在的前端框架太多了,国内用得比较多的是vue,非常强大,但是个人感觉灵活性糟糕,代码比较繁琐。近期接触一个框架,顿时让我感觉非常的爽,一种似曾相似的感觉,这个框架就是Svelte。Svelte是一个...