Jquery 和 Ajax 动态加载 IFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2501864/
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
Jquery and Ajax to Dynamically load IFrame
提问by JCHASE11
I have a script that dynamically loads iframes inside a webpage. You can see the demo here: DEMO
我有一个在网页中动态加载 iframe 的脚本。您可以在此处查看演示：DEMO
I want to use jquery to achieve a similar rseult, but with a nice sliding effect, and external links that load the iframe in another div. Basically, I have 10 links on a page. When the link is clicked, I want the iframe window to load in the new content and apply an effect to the transition. Does anyone know of any plugins that exist for this? I am not experienced enough to write a script from scratch, so any help would be much appreciated!
我想使用 jquery 来实现类似的结果，但具有很好的滑动效果，以及在另一个 div 中加载 iframe 的外部链接。基本上，我在一个页面上有 10 个链接。单击链接时，我希望 iframe 窗口加载新内容并将效果应用于过渡。有谁知道为此而存在的任何插件？我没有足够的经验从头开始编写脚本，因此非常感谢任何帮助！
采纳答案by Christoph
Changed based on comments...
根据评论更改...
Given a page like
给定一个页面
<input type="button" value="Load Frames" id="submit" name="submit" onclick="loadFrame()" />
<iframe class="frameToChange" link="http://www.apple.com" style="display: none" ></iframe>
<iframe class="frameToChange" link="http://www.google.com" style="display: none" ></iframe>
Try something like the below
尝试像下面这样
function loadFrame() {
var j$ = jQuery.noConflict();
var frames = j$('.frameToChange');
frames.each(function(index) {
j$(this).slideDown('fast');
j$(this).attr('src', j$(this).attr('link'));
});
}
回答by Sam
I use the following:
我使用以下内容：
$('iframe').load(function() {
$(this).animate({
'height': this.contentWindow.document.body.scrollHeight + 'px'
});
});
回答by Roman
You can either animate the iframe using jQuery or you could animate the content of the iframe.
您可以使用 jQuery 为 iframe 设置动画，也可以为 iframe 的内容设置动画。
The downside of doing anything with iframes is that they do not allow the script in the parent to communicate with the script running inside the iframe. It's called Cross Domain Restriction for protecting against malicious scripts from different domains.
使用 iframe 做任何事情的缺点是它们不允许父级中的脚本与 iframe 内运行的脚本进行通信。它被称为跨域限制，用于防止来自不同域的恶意脚本。
Hence if you intend to animate the content of your iframe, you need to implement the animation as part of the page that loads inside the iframe. Otherwise to animate the iframe itself, jQuery already has some basic animation capabilities that are described here.
因此，如果您打算为 iframe 的内容设置动画，则需要将动画作为加载到 iframe 内的页面的一部分来实现。否则，要为 iframe 本身设置动画，jQuery 已经具有此处描述的一些基本动画功能。
