Below is an example of how to use an HTML <iframe> as the target for links within a webpage. This demonstrates how to open different pages within the same iframe by clicking on different links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using iframe as Target</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
}
.links {
margin-right: 20px;
}
iframe {
width: 80%;
height: 600px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>HTML iframe Example</h1>
<div class="container">
<div class="links">
<ul>
<li><a href="https://www.example.com" target="contentFrame">Example</a></li>
<li><a href="https://www.wikipedia.org" target="contentFrame">Wikipedia</a></li>
<li><a href="https://www.openai.com" target="contentFrame">OpenAI</a></li>
</ul>
</div>
<iframe name="contentFrame" src="about:blank">
<!-- Default content shown if iframe is not supported -->
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
</html>
- Links: Each link has a target="contentFrame", which tells the browser to open the linked page in the iframe named contentFrame.
<li><a href="https://www.example.com" target="contentFrame">Example</a></li>
<li><a href="https://www.wikipedia.org" target="contentFrame">Wikipedia</a></li>
<li><a href="https://www.openai.com" target="contentFrame">OpenAI</a></li>
- Iframe: has the name="contentFrame", which matches the target attribute of the links. The initial src is set to about:blank to start with a blank page. The content inside the iframe tag is a fallback message for browsers that do not support iframes.
<iframe name="contentFrame" src="about:blank">
<!-- Default content shown if iframe is not supported -->
<p>Your browser does not support iframes.</p>
</iframe>
No comments:
Post a Comment