Question

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

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

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

jQuery resize event（使用Fork因为原来似乎没有维护）
能够结合以下内容绑定resize事件：

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

（不能发布指向分叉的链接，因为这是我的第一个问题而且我只允许发布两个链接...）

我让那些工作用于简单的测试iframe，现在我想将它实现为Magnific Popup。

刚才我在文档中发现了调整大小事件，该事件已内置于MFP中：＆＃34;仅在高度更改或布局强制时调整事件触发器＆＃34;。但是，当我根据选择输入在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，请参阅上面的示例中的callbacks: { resize: function() { $('iframe').iFrameResize([{ enablePublicMethods: true, checkOrigin: false }]); } ）。

我发现一个重要的事情是，它的代码中包含了一个调整大小回调：

{{1}}

那就是它。每次都适合我。

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的父窗口并从那里调整大小。希望这可以帮助别人。

Magnific Popup iframe自动调整内容更改（跨域）

3 个答案: