iFrame Test

by ukkpower

HTML

<iframe id="myframe" frameborder="0" src=""></iframe>

JavaScript

var frame = document.getElementById('myframe').contentDocument;

var page1 = '<!DOCTYPE html><html><body><ul><li><a href="page1.html">Page 1</a></li><li><a href="page2.html" id="choose_pic">Page 2</a></li><li><a href="page3.html">Page 3</a></li></ul><br>Page 1</body></html>';
var page2 = '<!DOCTYPE html><html><body><ul><li><a href="page1.html">Page 1</a></li><li><a href="page2.html">Page 2</a></li><li><a href="page3.html">Page 3</a></li></ul><br>Page 2</body></html>';
var page3 = '<!DOCTYPE html><html><body><ul><li><a href="page1.html">Page 1</a></li><li><a href="page2.html">Page 2</a></li><li><a href="page3.html">Page 3</a></li></ul><br>Page 3</body></html>'
    
function updateIframe (page){
	frame.open();
	frame.write(page);
	frame.close();
}

updateIframe (page1);

$("#myframe").contents().find("ul li a").on( "click", function(e) {
	e.preventDefault();
  var pageLink = $(this).attr("href");
  switch (pageLink) {
    case 'page1.html': 
      updateIframe (page1);
      break;
    case 'page2.html': 
      updateIframe (page2);
      break;		
    case 'page3.html': 
      updateIframe (page3);
      break;
	}
});

$('#myframe').load(function() {
  $("#myframe").contents().find("ul li a").on( "click", function(e) {
    e.preventDefault();
    var pageLink = $(this).attr("href");
    switch (pageLink) {
      case 'page1.html': 
        updateIframe (page1);
        break;
      case 'page2.html': 
        updateIframe (page2);
        break;		
      case 'page3.html': 
        updateIframe (page3);
        break;
    }
  });
});