iframe高度设置demo以及水印的简单添加

秒速五厘米 2023-07-24 09:08 24阅读 0赞

不是专业人士,只说自己的一些看法.  
对于iframe 的高度设置,如果父和子都能操作,那么可以在父或子中执行.一般是通过iframe的id来获取对象进行设置:父页面:

window.onload=function() { 
    				var doc = document.getElementById("ifDemo")
    				var docWin = doc.contentWindow || iframe.contentDocument.parentWindow; //子内容对象
    				var height = docWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; //子内容高度
    				doc.height = height;

子页面:

var obj = window.parent.document.getElementById("ifDemo");
    				var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    				var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    				var height = Math.max(cHeight, sHeight);
    				
    				obj.height=height;

还有一种,是只能操作子页面,而且还不知道父页面中iframe的id或name,或class等信息,可以通过parent.frames;获取父页面中iframe数组信息,然后通过src来匹配

父页面

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>iframe高度问题</title>
    		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    		<script>
    			/*
    						 * iframe子页面高度
    						 *  window.onload=function() { 
    						       var doc = document.getElementById("ifDemo")
    						       var docWin = doc.contentWindow || 				                   iframe.contentDocument.parentWindow; //子内容对象
    																			var height = docWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; //子内容高度
    																			doc.height = height;
    																			
    																		}*/
    
    			///水印
    			$(document).ready(function(e) { 　　
    				var iframe = document.getElementById("ifDemo3");
    				if(iframe.attachEvent) { 
    					iframe.attachEvent("onload", function() { 
    						//iframe加载完成后你需要进行的操作  
    						watermark(getNow());
    					});
    				} else { 
    					iframe.onload = function() { 
    						//iframe加载完成后你需要进行的操作  
    						watermark(getNow());
    					};
    				}
    			})
    
    			/**
    			 * 水印
    			 * @param { Object} settings
    			 */
    			function watermark(settings) { 
    				//默认设置
    				var defaultSettings = { 
    					watermark_txt: settings,
    					watermark_x: 20, //水印起始位置x轴坐标
    					watermark_y: 20, //水印起始位置Y轴坐标
    					watermark_rows: 0, //水印行数
    					watermark_cols: 0, //水印列数
    					watermark_x_space: 100, //水印x轴间隔
    					watermark_y_space: 50, //水印y轴间隔
    					watermark_color: '#aaa', //水印字体颜色
    					watermark_alpha: 0.4, //水印透明度
    					watermark_fontsize: '15px', //水印字体大小
    					watermark_font: '微软雅黑', //水印字体
    					watermark_width: 220, //水印宽度
    					watermark_height: 80, //水印长度
    					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 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);
    					};
    				};
    				document.body.appendChild(oTemp);
    			}
    
    			function getNow() { 
    				var d = new Date();
    				var year = d.getFullYear();
    				var month = change(d.getMonth() + 1);
    				var day = change(d.getDate());
    				var hour = change(d.getHours());
    				var minute = change(d.getMinutes());
    				var second = change(d.getSeconds());
    
    				function change(t) { 
    					if(t < 10) { 
    						return "0" + t;
    					} else { 
    						return t;
    					}
    				}
    				var time = year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒';
    				return time;
    			}
    		</script>
    	</head>
    
    	<body>
    
    		<h1>父页面</h1>
    		<div>白日依山尽</div>
    		<div>黄河入海流</div>
    		<div>如穷千里目</div>
    		<div>快买摄像头</div>
    
    		<div><iframe id="ifDemo" src="test02.html"></iframe></div>
    		<h1>父页面</h1>
    		<div>床前明月光</div>
    		<div>疑是地上霜</div>
    		<div>举头望明月</div>
    		<div>低头在他乡</div>
    		<div><iframe id="ifDemo2" src="test03.html"></iframe></div>
    		<h1>父页面</h1>
    		<div>独在异乡为异客</div>
    		<div>每逢佳节倍思亲</div>
    		<div>遥知兄弟登高处</div>
    		<div>何日拆字幸我门</div>
    		<div><iframe id="ifDemo3" src="test04.html"></iframe></div>
    
    	</body>
    
    </html>

子页面一

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>iframe高度问题</title>
    		<script>
    			window.onload = function() { 
    				var obj = window.parent.document.getElementById("ifDemo");
    				var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    				var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    				var height = Math.max(cHeight, sHeight);
    				//alert(cHeight+","+sHeight+","+height)
    				obj.height=height;
    			}
    		</script>
    	</head>
    
    	<body>
    		<h1>子页面</h1>
    		<div>妹喜</div>
    		<div>妲己</div>
    		<div>褒姒</div>
    		<div>夏姬</div>
    		<div>孟姜女</div>
    		<div>赵飞燕</div>
    		<div>貂蝉</div>
    		<div>大桥</div>
    		<div>小乔</div>
    		<div>绿珠</div>
    		<div>谢道韫</div>
    		<div>李祖娥</div>
    		<div>杨玉环</div>
    		<div>李师师</div>
    		<div>陈圆圆</div>
    		<div>香妃</div>
    	</body>
    
    </html>```
    
    子页面二
    
    ```handlebars
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>iframe高度问题</title>
    		<script>
    			window.onload = function() { 
    				
    				//知道父页面iframeid
    				//var obj = window.parent.document.getElementById("ifDemo2");
    				
    				//不知道父页面id和name
    				var frames=parent.frames;
    				var herf=window.location.href;
    				var obj;
    				for(var i=0;i<frames.length;i++){ 
    					if(herf==frames[i].frameElement.src){ 
    						obj=frames[i].frameElement;
    						break;
    					}
    				}
    				if(obj==undefined){ 
    					return;
    				}
    				
    				var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    				var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    				var height = Math.max(cHeight, sHeight);
    				//alert(cHeight+","+sHeight+","+height)
    				obj.height = height;
    			}
    		</script>
    	</head>
    
    	<body>
    		<h1>子页面2</h1>
    		<div>夏启</div>
    		<div>商汤</div>
    		<div>姬发</div>
    		<div>嬴政</div>
    		<div>刘邦</div>
    		<div>刘秀</div>
    		<div>曹丕</div>
    		<div>刘备</div>
    		<div>孙权</div>
    		<div>司马炎</div>
    		<div>司马睿</div>
    		<div>刘裕</div>
    		<div>萧道成</div>
    		<div>萧衍</div>
    		<div>陈霸先</div>
    		<div>杨坚</div>
    		<div>李渊</div>
    		<div>朱温</div>
    		<div>李存勖</div>
    		<div>石敬瑭</div>
    		<div>刘知远</div>
    		<div>郭威</div>
    		<div>赵匡胤</div>
    		<div>完颜构</div>
    		<div>忽必烈</div>
    		<div>朱元璋</div>
    		<div>努尔哈赤</div>
    	</body>
    
    </html>

子页面三