CODEWITHSUNDEEP
javascriptiframe
EasyBB
EasyBB

Reputation: 6574

Getting Contents of Iframe with Pure JavaScript

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');

Upvotes: 21

Views: 68775

Answers (2)

Luis Lobo
Luis Lobo

Reputation: 859

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);
};

Upvotes: 0

Nile
Nile

Reputation: 1586

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/

Upvotes: 38

Related Questions