How to get WHOLE content of iframe?

Question

I need to get whole content of iframe from the same domain. Whole content means that I want everything starting from <html> (including), not only <body> content. Content is modified after load, so I can't get it once again from server.

Are you trying to store all resources somewhere in the browser or what are you trying to accomplish? — BastiBen, Jan 01 '11 at 18:51

jesper · Accepted Answer · 2019-07-30T19:14:30.383

18

I belive I've found the best solution:

var document = iframeObject.contentDocument;
var serializer = new XMLSerializer();
var content = serializer.serializeToString(document);

In content we have full iframe content, including DOCTYPE element, which was missing in previous solutions. And in addition this code is very short and clean.

edited Jul 30 '19 at 19:14

answered Jan 02 '11 at 11:57

jesper

879
8
21

Thank you so much. – Rehmat Oct 10 '16 at 09:11
This is totally wrong, you missed a semicolon :) Thanks a lot. – Grégoire Hertault Nov 30 '16 at 17:03
One issue I have with this approach is that it encodes the iframe content. Everything gets Html encoded including font-family styles for example. If you have style tag with font-family defines as "Courier New", Courier, monospace then the double quotes will get encoded. – Marko Jun 05 '17 at 18:41

Thai · Answer 2 · 2011-01-01T19:02:40.717

7

If it is on the same domain, you can just use

iframe.contentWindow.document.documentElement.innerHTML

to get the content of the iframe, except for the <html> and </html> tag, where

iframe = document.getElementById('iframeid');

edited Jan 01 '11 at 19:02

answered Jan 01 '11 at 18:52

Thai

10,746
2
45
57

I also need `` tag with all attributes. – jesper Jan 01 '11 at 19:02
You can loop through `iframe.contentWindow.document.documentElement`'s attribute to create the wrapping HTML tag (or use the non-standard `outerHTML`). A sample cross-browser code could be found here: http://help.dottoro.com/ljloliex.php. – Thai Jan 01 '11 at 19:08
1

The first solution is more less acceptable (can't use `outerHTML` because FF doesn't support it). It would be simplier if jQuery allowed me to wrap created `html` tag in another "wrapper" tag and the use `html()` method on that wrapper... Of course "Node cannot be inserted at the specified point in the hierarchy" – jesper Jan 01 '11 at 19:38

score 1 · Answer 3 · answered Jan 01 '11 at 18:56

1

$('input.test').click(function(){
    $('textarea.test').text($('iframe.test').contents());
});

answered Jan 01 '11 at 18:56

Zhasulan Berdibekov

1,077
3
19
39

score 0 · Answer 4 · answered Jan 01 '11 at 20:25

You can get the literal source of any file on the same domain with Ajax, which does not render the html first-

//

function fetchSource(url, callback){

    try{
        var O= new XMLHttpRequest;
        O.open("GET", url, true);
        O.onreadystatechange= function(){
            if(O.readyState== 4 && O.status== 200){
                callback(O.responseText);
            }
        };
        O.send(null);
    }
    catch(er){}
    return url;
}
function printSourceCode(text){
    var el= document.createElement('textarea');
    el.cols= '80';
    el.rows= '20';
    el.value= text;
    document.body.appendChild(el);
    el.focus();
}

fetchSource(location.href, printSourceCode);

"Content is modified after load, so I can't get it once again from server." — jesper, Jan 01 '11 at 20:27

How to get WHOLE content of iframe?

4 Answers4

Linked