js 解决 Iframe 套用页面,自适应高度的问题.
两个页面,a.html 和 b.html
a.html
<div style="border: 1px solid;">
<iframe id="iframeId" src="b.html" frameborder="0"></iframe>
</div>
<script type="text/javascript">
function setIframeHeight(id){
try{
var iframe = document.getElementById("#iframeId");
if(iframe.attachEvent){
iframe.attachEvent("onload", function(){
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;// 定义变量获取 iframe 内嵌框架整体的总高度
});
return;
}else{
iframe.onload = function(){
iframe.height = iframe.contentDocument.body.scrollHeight;// 定义变量获取 iframe 内嵌框架里面的 body 节点的总高度; return; } }catch(e){ throw new Error('setIframeHeight Error'); } } </script>
b.html
<style type="text/CSS">
.ss{
height: 700px;
background: #0000FF;
color: #fff;
font-size: 36px;
position: relative;
}
</style>
<body>
<div class="ss">
aaa
<span style="position: absolute;bottom: 0px;">jdjdjjdj</span>
</div>
</body>
效果图
来源: http://www.bubuko.com/infodetail-2475597.html