Question

我可以从https://github.com/davidjbradshaw/iframe-resizer获得iframe-resizer的几个小问题。

如果我使用Restore Down调整浏览器的大小，一开始看起来一切正常，如果我手动调整浏览器的大小，iframe会调整大小，具体取决于分辨率，会出现一些额外的填充。

但是，如果您尝试调整大小并增加浏览器窗口的宽度，则填充变得更加明显，如果您实际上最大化窗口，则填充是荒谬的。

<iframe src="footer" style="width: 100%; border: 0" scrolling="no"></iframe>
<script type="text/javascript" src="/Scripts/iframeResizer.min.js"></script>
<script type="text/javascript">
    iFrameResize({
        log: false,
        enablePublicMethods: true,
    });
</script>

还有办法让iframe中的本地超链接服务器实际刷新父窗口吗？

非常感谢任何帮助： - ）

继续之后，我找到了一种解决方法，虽然它并不理想：

<script type="text/javascript">
    iFrameResize({
        log: false,
        enablePublicMethods: true
    });

    $(window).resize(function () {
        location.reload();
    });
</script>

这会在调整大小时解决填充问题，但会在调整大小时强制重新加载页面。

以下代码解决了调整大小时的额外填充问题，无需重新加载：

<script type="text/javascript">
    $('iframe').iFrameResize({
        log: false, autoResize: false,
        sizeWidth: true
    });
</script>

但是，在某些尺寸下调整大小并不会显示所有iframe内容。

不幸的是，页面重新加载是迄今为止唯一能够真正解决这两个问题的事情，我希望有人拥有更优雅的解决方案

Answer 1

管理解决问题而不重新加载页面，我的解决方案的代码如下：

<script type="text/javascript">
    $('iframe').iFrameResize({
        log: false
    });

    function correctHeight() {
        var iFrameId = document.getElementById('iFrameResizer0');

        $(window).resize(function () {
            $(iFrameId).attr('style', 'width: 100%').attr('height', '0px');

            var contentHeight = iFrameId.contentWindow.document.body.scrollHeight + 'px';

            $(iFrameId).attr('height', contentHeight).css('height', contentHeight);
        });
    }

    window.addEventListener("resize", function () {
        correctHeight();
    }, false);
</script>

关于调整大小和超链接

1 个答案: