The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

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

    This reply has been reported for inappropriate content.

    # 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>
    function insert() {
    var url = 'iframe-page.html',
    holder = document.getElementById('iframe-holder'),
    frame = holder.getElementsByTagName('iframe')[0]; = "block";
    frame.src = url;
    document.getElementById('container').insertBefore(holder, null);

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed