調整IFRAME以移除滾動條

Question

我的頁面上有一個iframe，每次內容更改時都要調整大小，以便不存在滾動條。該框架的內容經常改變而不改變URL。我希望幀中的所有內容能夠隨時顯示，而不必在幀大小調整時屏幕閃爍。父母和框架在同一個域上。

現在我調用函數來設置幀大小，只要我認爲大小已經改變。沒有到處調用這個函數，我該如何做到這一點？

如果有幫助，我使用的是angularJS。

Answer 1

您可以通過[iframe] .contentWindow.document.body.offsetHeight獲取iFrames內容高度。如果您不知道內容大小何時更改，則必須使用setInterval()手動檢查它。

Answer 2

試試這個，叫調整大小功能的事件監聽器，當過的iframe負荷，這將觸發

var iframe = document.getElementById('myIframe'); 
    var resizeFunction= function() {$("#myIframe").css({ 
     height: iframe.$("body").outerHeight() 
    });}; 
    if(iframe.addEventListener){ 
     iframe.addEventListener('load', resizeFunction, true); 
    }else if(iframe.attachEvent){ 
     iframe.attachEvent('onload',resizeFunction); 
    } 

Answer 3

這是一個功能至極我的網站上的一個應用。我修改了要放入指令的代碼。

注：在iframe您的容器必須有ID ifrm_container

<iframe resize-iframe id="iframe" src="..."> 

.directive('resize-iframe', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elm, attrs) { 

     var container = elm.contentWindow.document.getElementById('ifrm_container'); // Iframe container. Usualy a div. 

     function autoResize(){ 
      ifrmNewHeight = container.offsetHeight; // New height of the document. 

      if(ifrmNewHeight !== ifrmOldHeight) { 
       ifrmOldHeight = ifrmNewHeight + 30; // +30 for no scrollbar. 
       ifrm.style.height= (ifrmNewHeight + 30) + "px"; // Set iframe style. 
      } 

      setTimeout(autoResize, 250); 
     } 
     // First call of autoResize(). 
     autoResize(); 
    }; 
}); 

我已經測試了所有的瀏覽器IE7，即使這個解決方案和它的作品很好，但不是在一個指令（改變了一些元素）。

本指令未測試

Answer 4

嘗試iframe-resizer，一個下拉JS自動調整大小的I幀模塊。