调整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，它运行良好但不是在指令中（改变了一些元素）。

这个指令没有被测试