首页 / VUE / vue给页面添加水印，或者给iframe添加水印

vue给页面添加水印，或者给iframe添加水印

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue给页面添加水印，或者给iframe添加水印，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5657字，纯文字阅读大概需要9分钟。

内容图文

vue给页面添加水印，或者给iframe添加水印

给div设置id=“con_min”

<template>
	<div class="con_min" id="con_min">
	     <div class="con_body">
	       <iframe frameborder="0" id="myframe" scrolling="no" hspace="0" :src="url" style="width: 100%;height: 1000px;margin-top: -32px;"></iframe>
	     </div>
	</div>
</template>

mounted() {
      this.ready()
},
methods:{
	ready(){
	 ///水印
	 var that = this;
	 $(document).ready(function(e) {　　
	 	var iframe = document.getElementById("myframe");
	 	if(iframe.attachEvent) {
	 		iframe.attachEvent("onload", function() {
	 			//iframe加载完成后你需要进行的操作
	 			that.watermark(that.getName());
	 		});
	 	} else {
	 		iframe.onload = function() {
	 			//iframe加载完成后你需要进行的操作
	 			that.watermark(that.getName());
	 		};
	 	}
	 })
	},
	getName(){ // 获取人名电话
	 var that = this;
	 var name = localStorage.getItem('name');
	 var d = new Date();
	 var year = d.getFullYear();
	 var month = that.change(d.getMonth() + 1);
	 var day = that.change(d.getDate());
	 var hour = that.change(d.getHours());
	 var minute = that.change(d.getMinutes());
	 var second = that.change(d.getSeconds());
	
	 var time = name +'  ' + year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒';
	 return time;
	},
	change(t) { // 时间格式转换
	if(t < 10) {
		return "0" + t;
	} else {
		return t;
	}
	},
	watermark(settings) { // 水印
	//默认设置
	var defaultSettings = {
		watermark_txt: settings,
		watermark_x: 20, //水印起始位置x轴坐标
		watermark_y: 20, //水印起始位置Y轴坐标
		watermark_rows: 0, //水印行数
		watermark_cols: 0, //水印列数
		watermark_x_space: 50, //水印x轴间隔
		watermark_y_space: 50, //水印y轴间隔
		watermark_color: '#e1e6e8', //水印字体颜色
		watermark_alpha: 0.4, //水印透明度
		watermark_fontsize: '14px', //水印字体大小
		watermark_font: '微软雅黑', //水印字体
		watermark_width: 166, //水印宽度
		watermark_height: 100, //水印长度
		watermark_angle: 20 //水印倾斜度数
	};
	if(arguments.length === 1 && typeof arguments[0] === "object") {
		var src = arguments[0] || {};
		for(key in src) {
			if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue;
			else if(src[key]) defaultSettings[key] = src[key];
		}
	}
	var oTemp = document.createDocumentFragment();
	//获取页面最大宽度
	// var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
	 var page_width = 1000;
	var cutWidth = page_width * 0.0150;
	var page_width = page_width - cutWidth;
	//获取页面最大高度
	var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight); //+ 450;
	page_height = Math.max(page_height, window.innerHeight - 30);
	//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
	if(defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
		defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
		defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
	}
	//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
	if(defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
		defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
		defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
	}
	var x;
	var y;
	for(var i = 0; i < defaultSettings.watermark_rows; i++) {
		y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
		for(var j = 0; j < defaultSettings.watermark_cols; j++) {
			x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
			var mask_div = document.createElement('div');
			mask_div.id = 'mask_div' + i + j;
			mask_div.className = 'mask_div';
			mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
			//设置水印div倾斜显示
			mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.visibility = "";
			mask_div.style.position = "absolute";
			mask_div.style.left = x + 'px';
			mask_div.style.top = y + 'px';
			mask_div.style.overflow = "hidden";
			mask_div.style.zIndex = "9999";
			//让水印不遮挡页面的点击事件
			mask_div.style.pointerEvents = 'none';
			mask_div.style.opacity = defaultSettings.watermark_alpha;
			mask_div.style.fontSize = defaultSettings.watermark_fontsize;
			mask_div.style.fontFamily = defaultSettings.watermark_font;
			mask_div.style.color = defaultSettings.watermark_color;
			mask_div.style.textAlign = "center";
			mask_div.style.width = defaultSettings.watermark_width + 'px';
			mask_div.style.height = defaultSettings.watermark_height + 'px';
			mask_div.style.display = "block";
			oTemp.appendChild(mask_div);
		};
	};
	 var shuiyinbox = document.getElementById('con_min')
	shuiyinbox.appendChild(oTemp);
	},
},

话不多说看效果

vue给页面添加水印，或者给iframe添加水印 - 文章图片

内容总结

以上是互联网集市为您收集整理的vue给页面添加水印，或者给iframe添加水印全部内容，希望文章能够帮你解决vue给页面添加水印，或者给iframe添加水印所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1018503.html

来源：【匿名】

【上一篇】vue解决跨域问题【下一篇】php怎么返回数据给vue

更多 ►

【vue给页面添加水印，或者给iframe添加水印】教程文章相关的互联网学习教程文章

vue项目解耦后，主项目iframe内加载子项目，当子项目触发路由携带多个参数时，如何向主项目传递消息，在主项目（浏览器）中展示路由和查询参数信息【代码】【图】

背景：前端项目做了解耦后，在主项目（浏览器访问的页面）某个菜单下通过iframe加载子项目的页面，在子项目页面下点击某个链接并携带查询参数，通过window.top.PostMessage()函数向外（主项目）传递路由信息，使路由信息能够在外层项目（浏览器地址栏）能够同步展示内层页面的地址信息。问题描述：当内层项目向外传递路由信息，携带多个查询参数（如?a=1&b=2）时，如何拼接该参数呢？ant design vue项目通过路由访问对应菜单可以这...

vue组件中使用iframe元素【代码】

需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul><li v-for="item in webAddress"><a :href="item.link" target="showHere" @click="showIframe">{{item.name}}</a></li> </ul> <iframe v-show="iframeState" id="show-iframe" frameborder=0 name="showHere" scrolling=auto src=""></iframe></...

使用Vue如何实现集成Iframe页面【图】

这篇文章主要介绍了Vue集成Iframe页面的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧1. 项目需求我们切换为vue框架是后面的事情，之前还有一些功能页面是用jsp页面写的，而我们的管理系统需要既支持Vue的url，又要支持这些发布之后的jsp页面还有一个就是切换tab回来的时候之前输入的东西还要存在系统页面截图2. 实现思路针对这个问题，我们最开始的实现思路是写了一个iframe的通用组件，...

在vue组件中如何使用iframe元素

本篇文章主要介绍了vue组件中使用iframe元素的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧本文介绍了vue组件中使用iframe元素的示例代码，分享给大家，具体如下：需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><p class="accept-container"><p class="go-back" v-show="goBackState" @click="goBack">GoBack</p> <ul><li v-for="item in webAddress"><a :href="...

vue组件中使用iframe元素的方法示例

本文主要介绍vue组件中使用iframe元素的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><p class="accept-container"><p class="go-back" v-show="goBackState" @click="goBack">GoBack</p> <ul><li v-for="item in webAddress"><a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{it...

Vue中对iframe实现keep alive无刷新的方法

前言最近一个需求，需要在 Vue 项目中加入含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的...

vue组件中使用iframe元素的示例代码

本文介绍了vue组件中使用iframe元素的示例代码，分享给大家，具体如下：需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul><li v-for="item in webAddress"><a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{item.name}}</a></li> </ul> <iframe v-show="ifr...

Vue集成Iframe页面的方法示例【图】

1. 项目需求我们切换为vue框架是后面的事情，之前还有一些功能页面是用jsp页面写的，而我们的管理系统需要既支持Vue的url，又要支持这些发布之后的jsp页面还有一个就是切换tab回来的时候之前输入的东西还要存在系统页面截图2. 实现思路针对这个问题，我们最开始的实现思路是写了一个iframe的通用组件，然后把不同的http的页面的url传递进来进行切换，但是这样不满足第二条，我们发现只要切换了vue的路由，然后再切回http的页面，...

javascript-VueJS：将div内容绑定到iframe src【代码】

我在Vue文件中嵌入了这个pdf文件,但是我想从定义html表的div中获取内容：<template><div id="editor"> HTML TABLE HERE </div><iframe :src="iframe.src" type="application/pdf" width="100%" height="650" frameborder="0" style="position:relative;z index:999" ref="frame" @load="load" v-show="iframe.loaded"></iframe> </template><script>export default {data() {return {iframe: {src: '', //DIV HERE #EDITORloaded: ...

vue与iframe配合【代码】

需求说明有很多人是这么说的，有vue，还用jquery干嘛，还用iframe干嘛。vue强大不可否认，但是就因此认为在vue中不需要使用其他前端工程的方法，这是不对的。源代码构成一段大于3000行的js代码，主要是前端svg绘图，操作包括jquery、jquery-ui 创建、更改、删除svg节点，以及多种方式查看、修改节点属性，响应请求，一段200行左右的js代码，自定义插件，基于原型链，主要用于暂存svg绘图的内容一段css文件，未压缩状态1000多行任务...