iframe跨域的高度自适应-优快云博客

本文讨论了iframe跨域高度自适应的问题，并通过利用代理页面实现解决方案，避免了直接使用JavaScript的方法带来的麻烦。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe跨域的高度自适应。
这里需要利用一个代理页面，稍微显得有点麻烦。不过目前也没发现更好的方法。

页面嵌套示意：

[img]http://dl.iteye.com/upload/attachment/0084/5753/b213f5b2-7ed0-3896-bb69-1ce49eec02f9.png[/img]


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main.html</title>
</head>
<body>
<h1>主页面开始</h1>
<div style="border:1px solid green">
	<iframe id="iframeEl" frameborder="0" src="http://localhost/iframe/iframe.html"></iframe>
</div>
<h1>主页面结束</h1>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iframe</title>
<script type="text/javascript" src="http://shawn.a.cn/iframe/autoHeight.js"></script>
</head>
<body>
<h1>iframe页面的开始</h1>
<div style="height:500px;background-color:gray;">
	ssss
</div>
<h1>结束</h1>
</body>
</html>


//autoHeight.js

function sethash(){
    var  hashH = document.documentElement.scrollHeight; 
    var urlC = "http://shawn.a.cn/iframe/proxy.html"; 
    var hidden = document.createElement("iframe");
    hidden.style.display = "none";
    hidden.src = urlC+"#"+hashH; 
    document.body.appendChild(hidden);
}
window.onload = sethash;


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>proxy.html</title>
</head>
<body>
</body>
<script type="text/javascript">
	var h = document.location.hash.substr(1);
	var iframe = top.document.getElementById("iframeEl");
	iframe.style.height = h + "px";
</script>
</html>