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自适应高度
原文地址:https://www.cnblogs.com/alizhi/p/8359342.html