javascript Magnific Popup iframe 在内容更改时自动调整大小（跨域）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23656996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Magnific Popup iframe auto resize on content change (cross domain)
提问by Oliver
At the moment we are only using the iframe type of Magnific Popup (jQuery plugin). However the popup doesn't resize it's height when the content of the iframe grows/shrinks dynamically. I think for inline content resizing seems to work though.
目前我们只使用 iframe 类型的 Magnific Popup（jQuery 插件）。但是，当 iframe 的内容动态增长/缩小时，弹出窗口不会调整其高度。我认为内联内容调整大小似乎有效。
I searched the documentation and the web but could not find any solution.
我搜索了文档和网络，但找不到任何解决方案。
Therefore I was looking for third party solutions to auto resize (cross domain) iframes on content change. Best I found so far (looking for a simple solution) are:
因此，我正在寻找第三方解决方案来在内容更改时自动调整（跨域）iframe 的大小。到目前为止我发现的最好的（寻找一个简单的解决方案）是：
jQuery resize event(using a Fork because the original doesn't seem to be maintained)
to be able to bind a resize event in combination with:
jQuery 调整大小事件（使用 Fork，因为原始似乎没有维护）
能够结合调整大小事件：
jQuery postMessage(using a Fork for same reason)
to implement cross-domain communication between iframe and parent (because of same origin policy).
jQuery postMessage（出于同样的原因使用 Fork）
实现 iframe 和 parent 之间的跨域通信（因为同源策略）。
(Can't post links to forks since this is my first question and I'm only allowed to post two links... )
（无法发布指向 fork 的链接，因为这是我的第一个问题，我只能发布两个链接......）
I got those working for a simple test iframe, now I want to implement this into Magnific Popup.
我让那些为一个简单的测试 iframe 工作的人，现在我想将它实现到 Magnific Popup 中。
Just now I stumbeld upon a resize event in the documentation, which is already built into MFP: "resize event triggers only when height is changed or layout forced". However it doesnt fire when I display more/less text in the iframe based on a select input (only test so far but thats what I need at the moment).
刚才我在文档中偶然发现了一个调整大小事件，它已经内置在 MFP 中：“调整大小事件仅在高度更改或布局强制时触发”。但是，当我根据选择输入在 iframe 中显示更多/更少的文本时，它不会触发（目前仅测试，但这就是我目前需要的）。
So before implementing all those plugins I thought maybe I ask if someone already has a working solution for this or if I just overlooked a built in function/didn't use it right. I'm pretty new to JavaScript.
因此，在实现所有这些插件之前，我想也许我会问是否有人已经为此提供了可行的解决方案，或者我是否只是忽略了内置功能/没有正确使用它。我对 JavaScript 很陌生。
Thanks in advance
提前致谢
采纳答案by Oliver
Since there doesn't seem to be a built in solution for auto resizing (non-video) iframes in Magnific Popup I built my own solution using external plugins as mentioned above.
由于 Magnific Popup 中似乎没有用于自动调整（非视频）iframe 大小的内置解决方案，因此我使用上述外部插件构建了自己的解决方案。
To check if the iframe content height has changed I used this Fork of jQuery resize event plugin, which is compatible with the current jQuery version 1.11.1.
要检查 iframe 内容高度是否已更改，我使用了这个 Fork of jQuery resize event plugin，它与当前的 jQuery 版本 1.11.1 兼容。
To send the new height from iframe to parent window (cross domain compatible) I ended up using this jQuery postMessage Plugin, which seems to be well maintained and works in IE6+.
要将新高度从 iframe 发送到父窗口（跨域兼容），我最终使用了这个jQuery postMessage Plugin，它似乎维护得很好并且可以在 IE6+ 中使用。
Also I switched to use "type: inline" of Magnific Popup to display the iframes, since "type: iframe" seems to be specificaly styled for iframe video embedding like YouTube videos, which made it hard for me to style the popup height in a simple way.
此外，我改用 Magnific Popup 的“type: inline”来显示 iframe，因为“type: iframe”似乎是专门为 iframe 视频嵌入（如 YouTube 视频）设计的，这使我很难在 a 中设置弹出高度的样式简单的方法。
There might be a cleaner/straight forward solution, that's why I didn't get into too much details. Another reason is that I used quite a few lines of code for implementation into MFP and since I'm new to JS it might not be the best code ;) But since there was no answer yet I will mark this as accepted answer for now because it works.
可能有一个更清洁/直接的解决方案，这就是为什么我没有深入了解太多细节。另一个原因是我在 MFP 中使用了相当多的代码行，而且由于我是 JS 新手，它可能不是最好的代码 ;) 但是由于还没有答案，我现在将其标记为已接受的答案，因为有用。
Best solution of course would be if Magnific Popup would have a built in solution (feature request!).
最好的解决方案当然是如果 Magnific Popup 有一个内置的解决方案（功能请求！）。
回答by vitaly87
You can use: https://github.com/davidjbradshaw/iframe-resizer
您可以使用：https: //github.com/davidjbradshaw/iframe-resizer
This requires that you add a script to the page loading the <iframe>:
这要求您向加载以下内容的页面添加脚本<iframe>：
<script type="text/javascript" src="../iframeResizer.min.js"></script>
As well as to the externalpage you are trying to load Inside of the <iframe>:
以及您尝试加载的外部页面的内部<iframe>：
<script type="text/javascript" src="../iframeResizer.contentWindow.min.js"></script>
Note: If you are trying to load an external domain which isn't yours, this may not work for you - because you must have a script added in both places (sorry), but this WILL work if you are trying to load an HTTPS page inside a NON HTTPS page.
注意：如果您尝试加载不属于您的外部域，这可能对您不起作用 - 因为您必须在两个地方都添加一个脚本（抱歉），但是如果您尝试加载 HTTPS，这将起作用非 HTTPS 页面内的页面。
I also define my own markup for the magnific popup in the script.
我还为脚本中的 magnific popup 定义了我自己的标记。
$(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>'
},
});
});
You can resize the width of the iframe pretty easily with CSS to 100% of the parent window... as long as you have a max-widthset on your parent (.iframe-popupin the example above).
您可以使用 CSS 轻松地将 iframe 的宽度调整为父窗口的 100%……只要您在父窗口上max-width设置了一个集合（.iframe-popup在上面的示例中）。
One major thing I figured out that magnific actually has a resizecallback included in its code:
我发现 magnific 实际上在其代码中包含了一个调整大小的回调函数：
callbacks: {
resize: function() {
$('iframe').iFrameResize([{
enablePublicMethods: true,
checkOrigin: false
}]);
}
That's it. Works for me every time.
而已。每次都对我有用。
回答by Phillip Chan
I was looking for the solution to this and only found a simple solution for non-cross domain communication without using a plugin. (I haven't tested cross-domain, but I can't say it won't work).
我一直在寻找解决方案，只找到了一个不使用插件的非跨域通信的简单解决方案。（我没有测试过跨域，但我不能说它不起作用）。
There's a way for iframes to inherently communicate with their parent's window. You can resize the parent via this code on your iframe
有一种方法可以让 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>
When your iFrame loads, it should run this script, and access the iFrame's parent window and resize it from there. Hope this helps someone out.
当您的 iFrame 加载时，它应该运行此脚本，并访问 iFrame 的父窗口并从那里调整其大小。希望这可以帮助某人。
