Introduction: An Iframe is used to display a web page (or possibly a document) within a web page, i.e. it loads the contents of a page (or document) inside the current page.
Approach 1: For adding additional div’s in an iframe, you need to use a wrapper div, that wraps the contents of your intended div and the iframe into one unit. This way you can display the contents of your div along with the iframe embedding to the document/webpage.
Explanation: The div with id = “container” is the wrapper/container for the iframe and the contents of the div, thus the contents of the div are displayed along with the iframe.
Approach 2: Another way of handling the problem is to use the iframe itself for displaying the contents of the div instead of displaying them along with the iframe. However, this way the iframe only displays either the contents of the div or of the webpage/document at any point of time, thus this approach is a bit limited.
<iframe srcdoc="div goes here"></iframe>
Explanation: In the above example, the iframe displays the div containing the text: “This goes in the iframe”, and whenever the “Click Here” link is clicked the iframe loads the target URL page in the iframe, overwriting the div that was present earlier. Doing this would load the Wikipedia page, however, to display the contents of the div again you would require to reload the page.
- How to clear all div's content inside a parent div ?
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- How to place two div side-by-side of the same height using CSS?
- How to place SVG icons on a round circle side by side to another div using Bootstrap?
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
- Remove border from IFrame using CSS
- HTML | <iframe> width Attribute
- HTML | DOM IFrame Object
- HTML | <iframe> sandbox Attribute
- Resize an iframe based on the content
- What’s the best way to reload / refresh an iframe?
- HTML | <iframe> height Attribute
- HTML | <iframe> src Attribute
- Call a parent window function from an iframe
- HTML | <iframe> name Attribute
- HTML | DOM IFrame src Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Improved By : Akanksha_Rai