javascript - 内容更改时 Magnific Popup iframe 自动调整大小(跨域)

Question

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

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

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

jQuery resize event (使用 Fork 因为原来的似乎没有维护)
能够结合以下内容绑定(bind)调整大小事件:

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

(无法发布 fork 链接，因为这是我的第一个问题，我只能发布两个链接...)

我让那些人为一个简单的测试 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在你的 parent 身上设置(上例中的 .iframe-popup)。

我发现 magnific 实际上有一个 resize 回调包含在它的代码中:

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

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