Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the body's content of an iframe in JavaScript?
To get the body's content of an iframe in JavaScript, you need to access the iframe element first, then navigate to its document and retrieve the body content. This requires the iframe to be from the same origin due to browser security policies.
Basic Approach
First, get the iframe element using document.getElementById(), then access its content through contentWindow.document or contentDocument:
<!DOCTYPE html>
<html>
<head>
<title>Get Iframe Content</title>
</head>
<body>
<iframe id="myFrame" srcdoc="<h1>Hello from iframe!</h1><p>This is iframe content.</p>" width="400" height="200"></iframe>
<br><br>
<button onclick="getIframeContent()">Get Iframe Content</button>
<div id="output"></div>
<script>
function getIframeContent() {
var iframe = document.getElementById('myFrame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var content = iframeDoc.body.innerHTML;
document.getElementById('output').innerHTML = '<strong>Iframe body content:</strong><br>' + content;
}
</script>
</body>
</html>
Using contentWindow Method
The contentWindow property provides access to the iframe's window object:
<!DOCTYPE html>
<html>
<body>
<iframe id="frameID" srcdoc="<body><h2>Sample Iframe Content</h2><p>This is a paragraph inside iframe.</p></body>" width="300" height="150"></iframe>
<br><br>
<button onclick="getContent()">Get Content</button>
<p id="result"></p>
<script>
function getContent() {
var frameObj = document.getElementById('frameID');
var frameContent = frameObj.contentWindow.document.body.innerHTML;
document.getElementById('result').innerHTML = 'Content: ' + frameContent;
}
</script>
</body>
</html>
Cross-Browser Compatibility
For better browser compatibility, use both contentDocument and contentWindow:
<!DOCTYPE html>
<html>
<body>
<iframe id="testFrame" srcdoc="<body><div>Cross-browser iframe content</div></body>" width="350" height="100"></iframe>
<br><br>
<button onclick="getCrossBrowserContent()">Get Content (Cross-Browser)</button>
<div id="display"></div>
<script>
function getCrossBrowserContent() {
var iframe = document.getElementById('testFrame');
var iframeDoc;
// Cross-browser compatibility
if (iframe.contentDocument) {
iframeDoc = iframe.contentDocument; // Firefox, Chrome, Safari
} else if (iframe.contentWindow) {
iframeDoc = iframe.contentWindow.document; // Internet Explorer
}
if (iframeDoc) {
var content = iframeDoc.body.innerHTML;
document.getElementById('display').innerHTML = '<strong>Retrieved:</strong> ' + content;
} else {
document.getElementById('display').innerHTML = 'Cannot access iframe content';
}
}
</script>
</body>
</html>
Important Considerations
| Method | Browser Support | Use Case |
|---|---|---|
contentDocument |
Modern browsers | Direct document access |
contentWindow.document |
All browsers including IE | Window-based access |
| Combined approach | All browsers | Maximum compatibility |
Security Restrictions
Remember that accessing iframe content is subject to the Same-Origin Policy. You can only access content from iframes that share the same protocol, domain, and port as the parent page. Cross-origin iframes will throw a security error.
Conclusion
Use contentDocument or contentWindow.document to access iframe body content. Always consider same-origin policy restrictions and implement cross-browser compatibility for production applications.
24K+ Views
