js兼容的Iframe自適應高度
阿新 • • 發佈：2018-01-26
solid abs log ack row ati onload meid window
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>
效果圖
js兼容的Iframe自適應高度