Grow your CSS skills. Land your dream job.

Change the Iframe SRC Dynamically Without Triggering the Loading Spinner

  • # July 12, 2012 at 11:39 pm

    How can I change the src value on an iframe dynamically (or just insert a new iframe) without triggering the loading spinner? I know how to do that using window.onload, but with buttons, I did not find any.
    For example, see this blog (click the “reply” button!)
    Using setTimeout does not work.

    function insert() {
    setTimeout(function() {
    document.getElementById('frameContainer').innerHTML = "";
    }, 150);
    }

    PS: This forum have a little bug. Each

    tag break all the tag.

    # July 13, 2012 at 10:40 pm

    Almost solved: http://jsfiddle.net/tovic/kw7LD/22/

    function insert() {
    $('#container').html('');
    $('#container iframe').one("load", function() {
    $(this).attr('src', 'something.html');
    });
    }
    # July 25, 2012 at 10:48 pm

    http://jsfiddle.net/GeekyJohn/GH5QG/

    # July 28, 2012 at 5:37 am

    @elneco: Ehm… still triggering the loading spinner :p

    # January 9, 2013 at 12:10 am

    Works except in Google Chrome :D

    <div id="container"></div>
    <div id="iframe-holder">
    <iframe src="" id="frame"></iframe>
    </div>
    function insert() {
    var url = 'iframe-page.html',
    holder = document.getElementById('iframe-holder'),
    frame = holder.getElementsByTagName('iframe')[0];
    frame.style.display = "block";
    frame.src = url;
    document.getElementById('container').insertBefore(holder, null);
    }

    http://jsfiddle.net/kw7LD/88/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".