How to get HTML content of an iFrame using JavaScript ?

Last Updated : 15 Jul, 2025

The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document.

Code snippet:

function getIframeContent(frameId) {
    let frameObj = 
        document.getElementById(frameId);
    let frameContent = frameObj.
        contentWindow.document.body.innerHTML;
        
    alert("frame content : " + frameContent);
}

Some of the definitions are given below:

getIframeContent(frameId): It is used to get the object reference of an iframe.
contentWindow: It is a property that returns the window object of the iframe.
contentWindow.document: It returns the document object of the iframe window.
contentWindow.document.body.innerHTML: It returns the HTML content of the iframe body.

Example: The following example demonstrates to inclusion of separate HTML files into existing documents.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to get HTML content of
        an iFrame using javascript?
    </title>
</head>

<body>
    <iframe id="frameID" src="ContentOfFrame.html">
    </iframe>

    <a href="#" onclick="getIframeContent('frameID');">
        Get the content of Iframe
    </a>

    <script>
        function getIframeContent(frameID) {
            let frameObj =
                document.getElementById(frameID);
            let frameContent = frameObj
                .contentWindow.document.body.innerHTML;

            alert("frame content : " + frameContent);
        } 
    </script>
</body>

</html>

ContentOfFrame.html: The following example demonstrates the HTML code content of file "ContentOfFrame.html".

html

<!DOCTYPE html> 
<html> 

<body> 
    GeeksForGeeks: A Computer 
    Science Portal For Geeks 
    (It is loaded inside the 
    iframe) 
</body> 

</html>