html iframe高度自适应

关注

原创最新推荐文章于 2026-04-15 20:55:15 发布 1k 阅读 AI 写同款· GEO 优化 ›

从时序迷宫到稳定通信：FSMC配置中的时间参数深度解析与实战避坑指南本文深入解析STM32 FSMC配置中的时间参数，特别是AddressSetupTime和DataSetupTime的实战配置技巧。通过STM32F407连接SRAM的实际案例，提供从理论计算到CubeMX配置的全流程指南，帮助开发者避免常见时序陷阱，确保稳定通信。阅读详情

最近遇到一个问题纠结死了，iframe总是不能高度自适应，去网上查有很多解答，但是总不能解决问题，根本无效

老是报错

a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

这句话大概意思是必须同一个域

我只是做的HTML用iframe引用其他的HTML，这样并不是同一个域，简直笨死了，将其放到tomcat下测试了才可以，这才是在同一个域，用跨域也有解决办法，不过暂未验证，下面是俩参考网址

iframe高度自适应 JavaScript跨域总结与解决办法

以下是核心代码（都是在父文件里）

<iframe id="iframe" name="iframe" src="../index.jsp" width="100%" frameborder="no" border="0"  scrolling="no" onload="setIframeHeight(this)"></iframe>

<script type="text/javascript" language="javascript">
function setIframeHeight(iframe) {
	if (iframe) {
		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
		if (iframeWin.document.body) {
			iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
		}
	}
};
    
</script>

注意！js不要写在head里，不起作用，放到body里面

这也是iframe自适应的一种方法

<div id="index-content">
	<iframe id="iframe" src="login/register.html" width="100%" height="800px" onLoad="iFrameHeight()" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

<script type="text/javascript">
	function iFrameHeight() { 
		var ifm= document.getElementById("iframepage"); 
		var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; 
		if(ifm != null && subWeb != null) { 
		ifm.height = subWeb.body.scrollHeight; 
	} 
	} 

</script>

参考于下面网站，里面还有很多方法，也还没验证

http://www.jb51.net/article/15780.htm

收录于