Get HTML inside iframe using jQuery

Question

Here is my situation.

I have a file called iframe.html, which contains the code to for a image slideshow. The code is somewhat like

<         


        

Answer 1

Try this code:

$('#iframe').contents().find("html").html();

This will return all the html in your iframe. Instead of .find("html") you can use any selector you want eg: .find('body'),.find('div#mydiv').

Answer 2

$('#iframe').load(function() {
    var src = $('#iframe').contents().find("html").html();
    alert(src);
});

Answer 3

This line will retrieve the whole HTML code of the frame. By using other methods instead of innerHTML you can traverse DOM of the inner document.

document.getElementById('iframe').contentWindow.document.body.innerHTML

Thing to remember is that this will work only if the frame source is on the same domain. If it is from a different domain, cross-site-scripting (XSS) protection will kick in.

Answer 4

var iframe = document.getElementById('iframe');
  $(iframe).contents().find("html").html();