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

此指令未经过测试

调整IFRAME的大小以删除滚动条

4 个答案: