Jquery and Ajax to Dynamically load IFrame

Question

I have a script that dynamically loads iframes 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 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!

Answer 1

jQuery has a slide effect built into it. You may be able to achieve what you are looking for by using two iframes (call them old and new) and using the slide effect to transition between them.

Answer 2

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

Answer 3

You can either animate the iframe using jQuery or you could animate the content of the 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.

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.

Answer 4

I use the following:

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