Jquery和Ajax动态加载IFrame

我有一个脚本，动态加载网页内的iframe。您可以在这里看到演示：DEMO Jquery和Ajax动态加载IFrame

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

来源

2010-03-23 JCHASE11

改变基于评论...

鉴于像

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

来源

2010-03-23 16:55:11

这看起来不错，但我怎么会指定10周独立的I帧的网址？最好给它一个url属性（在HTML中），并使用jquery以iframe的形式加载url？ – JCHASE11 2010-03-23 16:56:44

@ JCHASE11，根据您的意见更新。只需添加尽可能多的iframes，class =“frameToChange”就可以，因为你需要 – 2010-03-23 17:18:37

Chris，看起来不错，但还不够完美。你可以在我创建的演示页面上看到你的代码：http://vitaminjdesign.com/iframe/ 当按钮被点击时，没有任何反应。我认为这是因为在你的jQuery中，它不说在哪里加载iframe。我将创建一个名为#test的div，我希望加载iframe。如何调整代码以使其加载到div中？ – JCHASE11 2010-03-23 17:32:03

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

来源

2010-03-23 16:54:21

有点像您可以使用jQuery动画的iframe或者你可以动画iframe的内容。

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

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

来源

2010-03-23 16:59:13 Roman

在这一点上，动画是次要的功能。虽然很高兴知道！ – JCHASE11 2010-03-23 17:04:19

这不一定是真的，如果父级和iframe都在同一个域上，他们可以互相交互。此外，如果iFrame从同一站点的子域中获取内容，则可以通过执行document.domain ='mydomain.com'来强制该域与父域相同以匹配父域。 – Sam 2010-03-23 17:06:25

好点。 iframe将与静态页面位于同一个域（子域），因此我可以为其设置动画效果！ – JCHASE11 2010-03-23 17:09:12

我使用以下命令：

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

来源

2010-03-23 17:03:54 Sam

Jquery和Ajax动态加载IFrame

回答

相关问题