iframe自适应高度以及调用父子窗口的方法

最新推荐文章于 2024-03-29 11:18:46 发布

原创最新推荐文章于 2024-03-29 11:18:46 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe html

web前端开发专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何实现IFrame的高度自适应调整以匹配其父窗口，并提供了具体JavaScript代码示例。此外，还介绍了如何在父窗口与IFrame之间进行方法调用，包括从父窗口访问IFrame的方法及反之。

<iframe name="mainFrame" id="mainFrame" frameborder="0"
				src=""
				style="margin: 0 auto; width: 100%;z-index:100;position: relative;">
			</iframe>

1. 高度与父窗口一致自适应

<script>
			function loginFrame(){
				var mainFrame = document.getElementById("mainFrame");
				var bheight = document.documentElement.clientHeight;
				mainFrame.style.width = '100%';
				mainFrame.style.height = (bheight) + 'px';			
			}
			loginFrame();
			
			window.onresize=function(){  
				loginFrame();
			}
		</script>

2调用父子窗口方法

a.获取父窗口方法 window.parent.method();
b..获取子窗口方法 $("#myFrame").window.method();