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>
效果图