Prevent loading the content of a hidden iframe

You can load the iframes after html being rendered by giving empty src in html of iframe and later assigning src by jquery / javascript.

Html

<iframe id="iframe1" ></iframe>

Javascript, iframe could be loaded on some action like button click

document.getElementById('iframe1').src="/default.aspx";

As kern3l said, we can add data attribute in iframe for holding src instead of hard coding.

Html

<iframe id="iframe1" data-frameSrc="/default.aspx"></iframe>

Javascript

ifrmame1 = $('#iframe1')ifrmam1.src = ifrmam1.data("frameSrc");

You can also make a new frame in jquery and assign src, this will load the page with blank frame.

$('<iframe>', {   src: '/default.aspx',   id:  'myFrame',   frameborder: 0,   scrolling: 'no'   }).appendTo('#parentDivId'); 

OR

var iframe = document.createElement('iframe');iframe.frameBorder=0;iframe.width="300px";iframe.height="250px";iframe.id="myFrame";iframe.setAttribute("src", '/default.aspx');document.getElementById("parentDivId").appendChild(iframe);

Just use one iframe:

<iframe id='page' src=''></iframe>

then assign src on each click of the button/link:

suppose this is the html:

<ul>  <li><a href='myfolder/myPage1.html'>Page 1</a></li>  <li><a href='myfolder/myPage2.html'>Page 2</a></li></ul>

then jquery:

$('ul li a').click(function(e){   e.preventDefault();   $('#page').attr('src', $(this).attr('href'));});