Forums

Hompimpa

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 = "<iframe src='something.html'></iframe>";
    }, 150);
}

<button onclick="insert();">Reply!</button>

PS: This forum have a little bug. Each <p> tag break all the <code> tag.

Hompimpa

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

function insert() {
    $('#container').html('<iframe src=""></iframe>');
    $('#container iframe').one("load", function() {
        $(this).attr('src', 'something.html');
    });
}

elneco

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

Hompimpa

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

Hompimpa

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/

treehouse : what would you like to learn today?

Forums

[Solved] Change the Iframe SRC Dynamically Without Triggering the Loading Spinner