jQuery get innerhtml of iframe

/ / 0 Comments

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

  1. Add HTML Markup i.e iframe tag with src
  2. 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

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

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments