Magnific Popup iframe 在内容更改时自动调整大小（跨域）

Question

目前我们只使用 iframe 类型的 Magnific Popup（jQuery 插件）。但是，当 iframe 的内容动态增长/收缩时，弹出窗口不会调整其高度。我认为对于内联内容调整大小似乎可行。

我搜索了文档和网络，但找不到任何解决方案。

因此，我一直在寻找第三方解决方案，以根据内容更改自动调整（跨域）iframe 的大小。 到目前为止我发现的最好的（寻找一个简单的解决方案）是：

jQuery resize event（使用 Fork，因为原来的似乎没有维护）
能够结合以下方式绑定调整大小事件：

jQuery postMessage（出于同样的原因使用 Fork）
实现 iframe 和父级之间的跨域通信（因为同源策略）。

（因为这是我的第一个问题，所以不能发布分叉的链接，我只能发布两个链接...）

我让那些工作在一个简单的测试 iframe 中，现在我想在 Magnific Popup 中实现它。

刚才我在文档中偶然发现了一个调整大小事件，该事件已内置于 MFP 中：“调整大小事件仅在更改高度或强制布局时触发”。但是，当我根据选择输入在 iframe 中显示更多/更少的文本时，它不会触发（目前仅测试，但这就是我目前需要的）。

所以在实现所有这些插件之前，我想也许我会问是否有人已经为此提供了可行的解决方案，或者我是否忽略了一个内置函数/没有正确使用它。我对 JavaScript 很陌生。

提前致谢

Answer 1

您可以使用：https://github.com/davidjbradshaw/iframe-resizer

这需要你在页面中添加一个脚本来加载<iframe>:

<script type="text/javascript" src="../iframeResizer.min.js"></script> 

以及您尝试加载的外部页面<iframe>内部：

<script type="text/javascript" src="../iframeResizer.contentWindow.min.js"></script>

注意：如果您尝试加载不属于您的外部域，这可能对您不起作用 - 因为您必须在两个地方都添加一个脚本（抱歉），但如果您尝试这样做，这将起作用在非 HTTPS 页面中加载 HTTPS 页面。

我还为脚本中的壮丽弹出窗口定义了我自己的标记。

      $(document).ready(function() {
        $('.open-popup').magnificPopup({
            items: {src: '/file.html'},
            type: 'iframe',
              iframe: {
                 markup: '<div class="iframe-popup">'+
                            '<iframe class="mfp-iframe" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>'+
                            '<div class="mfp-close"></div>'+
                          '</div>'
              },
        });
      });

您可以使用 CSS 轻松地将 iframe 的宽度调整为父窗口的 100%...只要您在父窗口上设置了 max-width（上例中为 .iframe-popup）。

我发现 magnific 实际上在其代码中包含一个 resize 回调：

    callbacks: {
        resize: function() {
            $('iframe').iFrameResize([{
                enablePublicMethods: true,
                checkOrigin: false
            }]);
         }

就是这样。每次都为我工作。

Answer 2

由于在 Magnific Popup 中似乎没有用于自动调整（非视频）iframe 大小的内置解决方案，因此我使用上述外部插件构建了自己的解决方案。

为了检查 iframe 内容高度是否发生变化，我使用了this Fork of jQuery resize event plugin，它与当前的 jQuery 版本 1.11.1 兼容。

为了将新高度从 iframe 发送到父窗口（跨域兼容），我最终使用了这个 jQuery postMessage Plugin，它似乎维护得很好并且在 IE6+ 中工作。

我还改用 Magnific Popup 的“type:inline”来显示 iframe，因为“type:iframe”似乎是专门为 iframe 视频嵌入（如 YouTube 视频）设计的，这让我很难为弹出窗口设置样式高度以简单的方式。

可能有一个更简洁/直接的解决方案，这就是为什么我没有详细说明。另一个原因是我使用了很多行代码来实现 MFP，而且由于我是 JS 新手，所以它可能不是最好的代码；） 但是由于还没有答案，我暂时将其标记为已接受的答案，因为它有效。

最好的解决方案当然是 Magnific Popup 有一个内置的解决方案（功能请求！）。

Answer 3

我一直在寻找解决方案，只找到了一个不使用插件的非跨域通信的简单解决方案。 （我没有测试过跨域，但不能说不行）。

iframe 可以通过一种方式固有地与其父窗口进行通信。您可以通过 iframe 上的此代码调整父级的大小

<script>
    $(document).ready(function() {

        // access the iframe's parent in order to resize
        var contentHeight           = $('.your-iframe-wrapper').height(),
            parentBody              = window.parent.document.body;          

        $('iframe', parentBody).animate({
            height: contentHeight + 100,
            maxHeight : "100%"
        }, 200)     

    });

</script>

当您的 iFrame 加载时，它应该运行此脚本，并访问 iFrame 的父窗口并从那里调整其大小。希望这可以帮助某人。