目前我们只使用 iframe 类型的 Magnific Popup(jQuery 插件)。但是,当 iframe 的内容动态增长/收缩时,弹出窗口不会调整其高度。我认为对于内联内容调整大小似乎可行。
我搜索了文档和网络,但找不到任何解决方案。
因此,我一直在寻找第三方解决方案以在内容更改时自动调整(跨域)iframe 的大小。 到目前为止我发现的最好的(寻找一个简单的解决方案)是:
jQuery resize event (使用 Fork 因为原来的似乎没有维护)
能够结合以下内容绑定(bind)调整大小事件:
jQuery postMessage (出于同样的原因使用 Fork)
实现 iframe 和父级之间的跨域通信(由于同源策略)。
(无法发布 fork 链接,因为这是我的第一个问题,我只能发布两个链接...)
我让那些人为一个简单的测试 iframe 工作,现在我想将它实现到 Magnific Popup 中。
刚才我偶然发现文档中的调整大小事件,它已经内置到 MFP 中:“调整大小事件仅在高度更改或强制布局时触发”。但是,当我根据选择的输入在 iframe 中显示更多/更少的文本时,它不会触发(目前仅进行测试,但这正是我目前需要的)。
因此,在实现所有这些插件之前,我想也许我会问是否有人已经为此提供了有效的解决方案,或者我是否只是忽略了一个内置函数/没有正确使用它。我是 JavaScript 的新手。
提前致谢
最佳答案
您可以使用: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
}]);
}
就是这样。每次都为我工作。
关于javascript - 内容更改时 Magnific Popup iframe 自动调整大小(跨域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23656996/