时间戳

首页 > 解决方案 > 单击 iframe 内的链接后如何调整 iframe 大小

javascript - 单击 iframe 内的链接后如何调整 iframe 大小

问题描述

我正在使用 iFrame Resizer 在页面上嵌入跨域 iframe。这很好用，直到我单击 iframe 内的链接，将我带到下一页。

在 iframe 源页面（远程页面）中，我在标题中有以下代码：

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@3.6.1/js/iframeResizer.contentWindow.min.js"></script>

在嵌入 iframe 的页面中，我得到了：

<iframe id="crelate-iframe" src="https://foo.bar" frameborder="0" width="100%" scrolling="no">
</iframe>

并在页面的页脚：

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/iframe-resizer@3.6.1/js/iframeResizer.min.js?ver=1'></script>

<script>
(function($) {
    $(function() {
        $('#crelate-iframe').iFrameResize({
            log: true,
            heightCalculationMethod: 'lowestElement'
        });
    });
})(jQuery);
</script>

据我所知，日志记录并没有泄露太多。我只能看到它最初会调整 iframe 的高度，但是当我单击它时不会，并且当下一页的高度较小时，我最终会在底部看到一堆空白。

有什么想法可能导致这种情况吗？

标签： javascriptjqueryiframeiframe-resizer

解决方案

您加载到 iFrame 的每个页面都需要添加脚本

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@3.6.1/js/iframeResizer.contentWindow.min.js"></script>

推荐阅读