調整IFRAME的大小以刪除滾動條

Question

我的頁面上有一個iframe，每次內容更改時都要調整大小，以便沒有滾動條。 幀的內容經常更改而不更改URL。 我希望幀中的所有內容始終顯示，而不會在幀調整大小時屏幕閃爍。 父級和框架位於同一個域中。

現在我調用一個函數來設置幀大小，只要我認為大小已經改變。 如果不到處調用此函數，我該怎么做？

如果有幫助，我正在使用angularJS。

Answer 1

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

Answer 2

嘗試使用iframe-resizer ，一個用於自動調整iframe大小的嵌入式js模塊。

Answer 3

試試這個，在事件監聽器中調用re-size函數，當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 4

這是我在我的一個網站上使用的功能。 我修改了要放在指令中的代碼。

注意：在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，它運行良好但不是在指令中（改變了一些元素）。

這個指令沒有被測試