jQuery Get HTML of Iframe: Here in this article will learn how to get innerHtml of an iframe. The Iframe or inline frame is used to display another webpage within a webpage.
In other words, an iframe is used to embed another HTML page inside a current webpage.
And in jQuery to get the inner content of an Iframe we use the combination of jQuery contents() method and the jQuery .html() method. It is like a mini browser window inside a webpage.
Steps to Get HTML content of Iframe in jQuery
- Add HTML Markup i.e iframe tag with src
- jQuery Code to Get HTML Content.
# Add HTML Markup
Here first we add an Iframe tag with Id as myIframe and set its source as Wikipedia homepage i.e (https://www.wikipedia.org/), and a button tag.
Our Markup looks like as written below:
<h1>How to Get HTML Content of Iframe in JQuery</h1>
<br>
<button id="myButton">Get Iframe Content</button>
<iframe id="myIframe" src="https://www.wikipedia.org/" width="480" height="320" ></iframe>
# jQuery Code to Get HTML Content of IFrame
Here we have a button tag, and on button click, we get innerHtml of the IFrame, by using contents() and .html() method. Our JS code looks like as written below:
$("#myButton").on('click', function() {
alert($("#myIframe").contents().find("html").html());
});
The above code will return all the HTML content of our Iframe.
Conclusion: Here we use the combination of jquery contents() and .html() method to get the innerHTML of an Iframe.
Other Resource:
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *