Jquery and Ajax for dynamically loading IFrames

Question

I have a script that dynamically loads an iframe inside a webpage. You can see the demo here: DEMO

I want to use jquery to achieve a similar rseult, but with a nice sliding effect and external links that load the iframe into another div. Basically, I have 10 links per page. When a click is clicked, I want the iframe to load into the new content and apply the effect to the transition. Does anyone know of any plugins that exist for this? I'm not experienced enough to write a script from scratch, so any help would be greatly appreciated!

Answer 1

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

Answer 2

I am using the following:

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

Answer 3

You can either animate the iframe using jQuery, or you can animate the contents of the iframe.

The disadvantage of doing anything with an iframe is that they do not allow the script to parently interact with the script running inside the iframe. It is called Cross Domain Restriction to protect against malicious scripts from different domains.

Therefore, if you intend to animate the contents of your iframe, you need to implement the animation as part of the page loaded inside the iframe. Otherwise, to animate the iframe itself, jQuery already has some basic animation features that are described here .

Answer 4

jQuery has a slide effect built into it. You can achieve what you are looking for using two iframes (call them old and new) and use the slide effect to jump between them.