Question

我有一个动态加载网页内iframe的脚本。您可以在此处查看演示：DEMO

我想使用jquery来实现类似的rseult，但是有一个很好的滑动效果，以及在另一个div中加载iframe的外部链接。基本上，我在页面上有10个链接。单击链接时，我希望iframe窗口加载新内容并将效果应用于过渡。有没有人知道为此存在的任何插件？我没有足够的经验从头开始编写脚本，所以任何帮助都会非常感激！

Answer 1

根据评论更改...

给出像

这样的页面

<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>

尝试类似下面的内容

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'));
    });
}

Answer 2

我使用以下内容：

$('iframe').load(function() {
    $(this).animate({
        'height': this.contentWindow.document.body.scrollHeight + 'px'
    });
});

Answer 3

您可以使用jQuery为iframe设置动画，也可以为iframe的内容设置动画。

使用iframe执行任何操作的缺点是，它们不允许父级中的脚本与iframe内运行的脚本进行通信。它被称为跨域限制，用于防御来自不同域的恶意脚本。

因此，如果您打算为iframe的内容设置动画，则需要将动画实现为在iframe中加载的页面的一部分。否则，为了动画iframe本身，jQuery已经具有一些描述为here的基本动画功能。

Answer 4

jQuery内置了slide效果。您可以通过使用两个iframe（称为旧的和新的）并使用幻灯片效果在它们之间进行转换来实现您所寻找的目标。

Jquery和Ajax动态加载IFrame

4 个答案: