Getting Contents of Iframe with Pure JavaScript

Question

I already can get the content of an Iframe with jQuery, though I would like to learn how to get it with pure JavaScript.

This is what I have so far.

 var frame = document.getElementById('awc_frame');
 var easyBB = frame.contentWindow.document.body.innerHTML;
 easyBB.getElementById('chatbox-title').innerText="Chatbox";

What am I doing wrong, please help. Also originally the frame does not have an ID, and I already tried this

var frame = document.frames['awc_frame'];

Is that cross browser efficient? And then how do I get the contentWindow? Just some explanation so I can do this with JavaScript and not jQuery. jQuery version is this

var frame = $('#avacweb_chat iframe');
var easyBB = $('#chatbox-title',frame.contents()).text('Chatbox');

possible duplicate of [How to get the body's content of an iframe in Javascript?](http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript) — Ciro Santilli OurBigBook.com, Feb 16 '14 at 22:14
sorry, no offense intended. Is there a community consensus (e.g. Meta question) that says that it is not good to mark as duplicates of old questions? Do you agree that they are the same question? If not, can you explain why? I may have misjuged. — Ciro Santilli OurBigBook.com, Feb 17 '14 at 10:57
Well yes different. Sorry for my rudeness just was irritated. Different as I show my code, both jquery and vanilla and that question shows no code from the OP — EasyBB, Feb 17 '14 at 13:51

Nile · Accepted Answer · 2013-05-26T01:52:01.207

38

If it is on the same domain, try this. It won't let you access iframe contents if the iframe is of a different origin than the window that you are viewing.

var iframe = document.getElementById("awc_frame");
var iframe_contents = iframe.contentDocument.body.innerHTML;

Working example with jsfiddle iframe viewing a page on the same domain:

http://jsfiddle.net/tqAL3/1/

edited May 26 '13 at 01:52

answered May 26 '13 at 01:30

Nile

1,586
1
14
25

Specified at: http://www.w3.org/TR/html5/embedded-content-0.html#dom-iframe-contentdocument – Ciro Santilli OurBigBook.com Nov 10 '14 at 09:39
what if I want the HEAD with it ? Do I have to do contentDocument.head.innerHTML and concatenate to the body or is there a faster way – Rayjax Sep 18 '15 at 09:10
1

nevermind -> iframe.document.getElementsByTagName('html')[0].innerHTML – Rayjax Sep 18 '15 at 09:13

score 0 · Answer 2 · answered May 08 '21 at 17:53

The same answer as Nile but as a function more similar to the querySelector

// iframe-query-selectors.js v1
function iframeQuerySelector(iframe, selector, all){
    if( iframe && (iframe.nodeName || iframe.tagName) === 'IFRAME' && iframe.nodeType === 1){
        all = all ? 'All' : '';
        if(selector){
            return iframe.contentDocument['querySelector' + all](selector);
        };
        return iframe.contentDocument;
    };
    throw new Error('The element must be an iframe.');
};
function iframeQuerySelectorAll(iframe, selector){
    return iframeQuerySelector(iframe, selector, true);
};

Getting Contents of Iframe with Pure JavaScript

2 Answers2

Linked

Related