Open In App

How to get HTML content of an iFrame using JavaScript ?

Last Updated : 15 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

ezgifcom-video-to-gif-converted-(1)

Output



Similar Reads

How to check if an iframe is present in another iframe in JavaScript ?
In this article, we will see how to check if an iframe is present in another iframe, along with understanding its basic implementation with the help of a simple example. An iFrame is an HTML element that allows users to embed a webpage within another webpage. It's frequently used for displaying content from another website, such as a video or a soc
4 min read
How to load a hyperlink from one iframe to another iframe ?
HTML Iframe or inline frame allows embedment of multiple HTML pages in an HTML page. In this article, we will see how to change the content of one iframe using hyperlinks in another iframe. This can be achieved by the proper usage of the name attribute in the iframe tag and the target attribute in the anchor tag. The name attribute allows each inli
2 min read
How to insert HTML content into an iFrame using jQuery?
Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method. The .contents() method: It returns all the direct children, including text and comment nodes for the selected element. Syntax: $(selector).contents()Find the iframe in the body section.Get the value to be inserted in the iframe in
2 min read
How to specify the HTML content of the page to show in the iframe element HTML5 ?
In this article, we will learn how to specify the content of a webpage to &lt;iframe&gt; in a web browser statically and dynamically by using JavaScript with HTML. We need a web browser i.e., Chrome (recommended) or Electron Application. This article will explain the proper way to assign or embed any external webpage to another webpage or even chan
2 min read
Resize an iframe based on the content
The iframe HTML element is often used to insert contents from another source. Contents that need resizing are done indirectly using a div tag. The trick is to initiate with a div tag and enclose within an iframe tag. Now provide iframe with CSS. Note: To open the source site to resize its contents, the source site must be listed in the same directo
2 min read
How to adjust the width and height of iframe to fit with content in it ?
Using iframe tag the content inside the tag is displayed with a default size if the height and width are not specified. thou the height and width are specified then also the content of the iframe tag is not displayed in the same size of the main content. It is difficult to set the size of the content in the iframe tag as same as the main content. S
3 min read
How to enable extra set of restrictions for content in an iframe element in HTML5 ?
In this article, we will learn how to enable an extra set of restrictions for content in an iframe element in HTML5. Below are the approaches for enabling the set of instructions. Approach: The approach of this article is to learn how to enable an extra set of restrictions for the content in an iframe element in HTML5. The task can be done by using
2 min read
How to set height of an iframe element using HTML ?
The iframe in HTML stands for Inline Frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. The HTML &lt;iframe&gt; height attribute is used to specify the heig
1 min read
How to specify name of an iframe element using HTML ?
The iframe in HTML stands for Inline Frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. The HTML iframe name attribute is used to specify a reference for an
1 min read
How to Get the Content of an HTML Comment using JavaScript ?
In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (including HTML comments) are represented in the DOM tr
3 min read