html iframe高度自適應

想到的一種辦法是，在父頁面裡獲取子頁面的高度，在父頁面onlod裡把獲取到子頁面的高度賦值給父頁面iframe標籤，不過這種方法感覺不是很好，因為瀏覽器相容性不好，獲取不到高度

這種方法有兩種寫法

<script type="text/javascript">  // 計算頁面的實際高度，iframe自適應會用到
  function calcPageHeight(doc) {      
  var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)     
   var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)    
     var height  = Math.max(cHeight, sHeight)      return height
  }  var ifr = document.getElementById('ifr')
  ifr.onload = function() {      var iDoc = ifr.contentDocument || ifr.document     
   var height = calcPageHeight(iDoc)
      ifr.style.height = height + 'px'
  }</script>

<script>    // 計算頁面的實際高度，iframe自適應會用到
    function calcPageHeight(doc) {        
    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)       
     var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)       
      var height  = Math.max(cHeight, sHeight)        return height
    }
    window.onload = function() {        
    var height = calcPageHeight(document)
        parent.document.getElementById('ifr').style.height = height + 'px'     
    }</script>

 

還有一種是相容性比較好的

<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript程式碼： 
<script type="text/javascript" language="javascript"> 
function iFrameHeight() { 
var ifm= document.getElementById("iframepage"); 
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; 
if(ifm != null && subWeb != null) { 
ifm.height = subWeb.body.scrollHeight; 
} 
} 
</script>

 作者：

原文連結：https://www.cnblogs.com/zxf100/p/10322564.html