`
mutongwu
  • 浏览: 439742 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

iframe跨域的 高度自适应

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

页面嵌套示意： 





<!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>
  • 大小: 5.8 KB
分享到：
| 页面布局：分5个区域
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics