How to place a div inside an iframe for IE ? - GeeksforGeeks

17 Jun, 2020
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.
Iframe Syntax:
<iframe src="URL"></iframe>

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.
Example:
<!DOCTYPE html><html>  <head>    <title>        How to place a div inside        an iframe for IE?    </title></head>  <body>    <h2>Div in an Iframe</h2>      <div id="container" style="border: solid 2px #000;">        <iframe height="500px"             width="100%" name="iframe_a">        </iframe>          <div>            <h2>This goes in the iframe</h2>            <h1> This is another heading </h1>        </div>                  <!-- Put all your contents             of the div here -->    </div>      <p><a href="https://ide.geeksforgeeks.org/"             target="iframe_a">            Click Here        </a>    </p></body>  </html>                    
Output:
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.
Syntax:
<iframe srcdoc="div goes here"></iframe>

Example:
<!DOCTYPE html><html>  <head>    <title>        How to place a div inside        an iframe for IE?    </title></head>  <body>    <h2>Div in an Iframe</h2>    <div id="container" style=            "border: solid 2px #000;">        <iframe srcdoc="<div>            <h2>This goes in the iframe</h2>             </div>" height="500px"              width="100%" name="iframe_a">        </iframe>        <!-- Put all your contents             of the div here -->    </div>      <p><a href="https://ide.geeksforgeeks.org/"            target="iframe_a">            Click Here        </a>    </p></body>  </html>
Output:
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Akanksha_Rai
HTML-Basics
HTML-Misc
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?