Load Iframe after Page Load - Pure JavaScript

by Taufik Nurrohman

HTML

<div id="frameContainer"></div>

CSS

body {background-color:#222;}

#frameContainer {
  background:white url('http://hompimpa.googlecode.com/svn/trunk/images/loading.gif') no-repeat 50% 50%;
  margin:30px;
}

#frameContainer iframe {
  display:block;
  padding:5%;
  border:none !important;
}

JavaScript

//doesn't block the load event
function createIframe() {
    var i = document.createElement("iframe");
    i.src = "http://hompimpa.googlecode.com/svn/trunk/CSSBeatComp/index.html";
    i.scrolling = "auto";
    i.frameborder = "0";
    i.width = "90%";
    i.height = "220px";
    document.getElementById("frameContainer").appendChild(i);
};

// Check for browser support of event handling capability
if (window.addEventListener) window.addEventListener("load", createIframe, false);
else if (window.attachEvent) window.attachEvent("onload", createIframe);
else window.onload = createIframe;