0

我的页面上有一个 iframe，每次内容更改时我都想调整它的大小，以便没有滚动条。在不更改 URL 的情况下，框架的内容经常更改。我希望框架中的所有内容一直显示，而在框架调整大小时屏幕不会闪烁。父级和框架在同一个域上。

现在，每当我认为尺寸发生变化时，我都会调用一个函数来设置帧尺寸。如何在不到处调用此函数的情况下做到这一点？

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

4

4 回答 4

1

尝试iframe-resizer，一个用于自动调整 iframe 大小的插入式 js 模块。

于 2015-03-26T09:54:49.380 回答
1

您可以通过 [iframe] 获取 iFrames 内容高度.contentWindow.document.body.offsetHeight。如果您不知道内容大小何时更改，则必须使用setInterval().

于 2013-07-26T17:58:01.107 回答
0

试试这个，在事件监听器中调用 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);
    }
于 2013-07-26T18:32:32.763 回答
0

这是我在我的一个网站上使用的功能。我修改了代码以放入指令中。

注意：在 iframe 中，您的容器必须具有 IDifrm_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 上测试了这个解决方案，它运行良好，但不是在指令中（更改了一些元素）。

该指令未经测试

于 2013-07-26T19:06:34.877 回答