You can display more than one Web page at a time in the browser window by using iframes. The displayed pages appear to be one page, but in reality each iframe displays a separate Web document (page).
Some situations that lend themselves well to your using iframes are:
An inline frame is quite a different animal from the framesets and frames that you might see in a lot of textbooks and tutorials. The <iframe> tag allows you to put an HTML document somewhere in another HTML document in much the same way as you put an image into a document. You can even use a hypertext link which has a target attribute, if you put a name attribute into the iframe tag itself, to replace the contents of the iframe. Also, an inline frame can have a scrollbar, so the document that it displays can be longer than the frame's vertical size.
The <iframe> tag can accept float, height, and width CSS properties just like an <img> tag, and text can flow around the inline frame just as it does around an image.
Make sure you give the iframe enough width, so your pages that are displayed in the iframe will not require a horizontal scrollbar!
The iframe tag has a src attribute. The value of the src attribute is the URL of the document/page that you want the browser to display in the frame when the iframe's container page initially displays.
Please note that the <iframe> tag has a closing </iframe> tag.
The magic of iframes is the ability to load a separate Web document/page into an iframe with a hypertext link that is in the main document/page.
There are two things that you need to do, to make use of this magic:
You can use any value (as long as it does not contain any spaces) for the id, name, and target attributes. But it's much nicer on your brain if you make the name something meaningful, such as "mainframe" or "theframe" or something like that.
If you display someone else's Web page in an iframe tag in your site, you are probably infringing on their ownership and copyright rights. (As always, check with your attorney if you're not sure.)
Here is some sample code that shows how an iframe can be used within a responsive web page. It is page iframeResponsive.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>RWD Inline Frame Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="iframeResponsive.css" />
</head>
<body class="w3-container">
<div id="mainBanner" class="w3-container">
<a href="iframeHome.html" target="iframeStuff">
<img src="mainBanner.gif" id="bannerImg" class="w3-image" alt="Main Banner"></a>
</div>
<div class="w3-row w3-container">
<div id="menuDiv" class="w3-col l2 m3 s12 w3-bar-block">
<a href="iframeHome.html" target="iframeStuff" class="w3-bar-item w3-button w3-indigo">Home</a>
<a href="iframeAboutUs.html" target="iframeStuff" class="w3-bar-item w3-button w3-indigo">About Us</a>
<a href="iframeResources.html" target="iframeStuff" class="w3-bar-item w3-button w3-indigo">Resources</a>
</div>
<iframe id="iframeStuff"
name="iframeStuff" src="iframeHome.html" class="w3-col l5 m6 s12">
</iframe>
<div class="w3-col l5 m3 s12"></div>
</div>
</body>
</html>
Here is the stylesheet, iframeResponsive.css:
body
{
font-family:Arial,sans-serif;
background-color:#FFFFDD;
}
img
{
border: none;
}
#iframeStuff
{
/*border:1px solid #CCCCCC;*/
border: none;
height: 30em;
}
#menuDiv
{
margin-bottom: 16px;
}
#mainBanner
{
margin-bottom: 16px;
}
#bannerImg
{
width: 100%;
}
#breadcrumbs
{
position: absolute;
left: 20px;
top: 20px;
}
#mainContent
{
position: absolute;
left: 20px;
top: 50px;
}
You can open the page that contains the above code, and note how the iframe works.
Please note these points about the above code: