Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting Contents of Iframe with Pure JavaScript

Tags:

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');
like image 693
EasyBB Avatar asked May 26 '13 01:05

EasyBB


People also ask

How can I access iframe element with JavaScript?

Getting the element in Iframeconst iframe = document. getElementById("myIframe"); Now, it has and contentWindow property which returns the document object by using that we can access the elements from an Iframe.

What is #document in iframe?

Definition and Usage. The contentDocument property returns the Document object generated by a frame or iframe element. This property can be used in the host window to access the Document object that belongs to a frame or iframe element.

Why iframe is not recommended?

Iframes Bring Security Risks. If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in.


1 Answers

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/

like image 102
Nile Avatar answered Nov 15 '22 00:11

Nile