详细解析iframe标签实现的页面嵌套功能

在web项目的页面布局中，我们经常需要用到“页面之间的相互嵌套”，例如：后台管理页面的左边菜单栏，右边主页面。使用<iframe>标签就可以实现这个功能，并且被大部分的浏览器所支持。

1、iframe具有以下属性（前8条为常用属性）：

（1）、frameborder：设置iframe的边框，设为1时显示边框，设为0时不显示边框

（2）、height：设置iframe的高度

（3）、width：设置iframe的宽度

（4）、marginheight：设置iframe的上下边距

（5）、marginwidth：设置iframe的左左右边距

（6）、name：设置iframe的名称

（7）、scrolling：设置iframe的滚动条，设为yes时显示滚动条，设为no时不显示滚动条，设为auto时依情况自动显示

（8）、src：设置显示文档的URL

（9）、longdesc：指向iframe的描述页面（浏览器支持差）

（10）、sandbox：设置iframe中内容的额外限制

（11）、seamless：属性值也是 seamless 规定 <iframe> 看上去像是包含文档的一部分

（12）、srcdoc：规定在 <iframe> 中显示的页面的HTML内容

2、iframe常用功能：父窗口和子窗口相互的调用方法

（1）HTML语法：<iframe name="myFrame" src="child.html"></iframe> 

（2）父窗口调用子窗口：myFrame.window.functionName(); 

（3）子窗品调用父窗口：parent.functionName(); 

3、iframe自适应内容高度（需要在本地服务器进行测试，直接用浏览器测试会有错误）

html代码：

<iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
   	scrolling="no" height="100%" width="100%">
</iframe>

javascript代码：

<script type="text/javascript">
	console.log("可视区域高度："+$(window).height());
	console.log("文档大小高度："+$(document).height());
	window.onresize = function () {
		reinitIframe();
	}
	function reinitIframe(){
		var iframe = document.getElementById("menuFrame");
		try{
			var bHeight = iframe.contentWindow.document.body.scrollHeight;
			var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
			console.log(bHeight);
			console.log(dHeight);
			var height = Math.min(bHeight, dHeight);
			iframe.height = height+10;
			console.log(iframe.height);
		}catch (ex){}
	}
	// 定时触发
	window.setInterval("reinitIframe()", 200);
</script>

很赞哦！ (0)

转载：感谢您对初柒先生个人网站的认可！如果您喜欢我们的文章，我们非常地欢迎各位朋友进行转载，但转载请在文章末尾备注“本文来源：初柒先生个人网站”。

初柒先生 2019-12-07 12:31 196人已围观