Scribd
Upload
7 views20 pages

HTML Frames Presentation-1

Uploaded by

Piush Gogi

Copyright:

© All Rights Reserved
Download as PPTX, PDF, TXT or read online from Scribd
Download as pptx, pdf, or txt
7 views20 pages

HTML Frames Presentation-1

Uploaded by

Piush Gogi

Copyright:

© All Rights Reserved
Download as PPTX, PDF, TXT or read online from Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 20

Frames in HTML and JavaScript

An overview of HTML Frames, their


usage, and examples of accessing
frame content dynamically
What are Frames?
• - Frames allow division of a webpage into
independent sections, each displaying a
separate document.
• - Defined with <frameset> in HTML; less
common today due to compatibility issues.
• - Replaced mostly by CSS layouts and iframes,
but still useful for specific tasks.
Creating Frames in HTML
• - Use <frameset> to define the layout.
• - Within <frameset>, use <frame> or <iframe>
elements to define each frame.
• - Example:
• <frameset rows='50%, 50%'>
• <frame src='frame1.html'>
• <frame src='frame2.html'>
• </frameset>
HTML Frameset Syntax
• 1. <frameset>: Defines layout for frames.
• - rows attribute: Sets height of each frame row.
• - cols attribute: Sets width of each frame column.
• 2. <frame>: Defines individual frames and their
content source (src attribute).
• - Example:
• <frameset rows='50%, 50%'>
• <frame src='frame1.html'>
• <frame src='frame2.html'>
• </frameset>
Invisible Frame Borders
• - To remove frame borders, use the
frameborder attribute in <frameset>.
• - Set frameborder='0' for invisible borders.
• - Example:
• <frameset rows='50%, 50%' frameborder='0'>
• <frame src='frame1.html'>
• <frame src='frame2.html'>
• </frameset>
Accessing and Changing Frame Content
• - Use JavaScript to access and manipulate other
frame content.
• - Example: Set values in Frame 2 from Frame 1.
• Code:
• <-- Main.html -->
<html>
<head> <title>Main File</title> </head>
<frameset rows="50%, 50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</html>
• <-- Frame1.html -->
<html>
<body>
<h2>This Is Frame 1</h2>
<button onclick="display()">Send Data</button>
<script language="javascript" type="text/javascript">
function display()
{
parent.frame2.document.getElementById("tf1").value="";
parent.frame2.document.getElementById("tf2").value="";
parent.frame2.focus();
}
</script>
</body>
</html>
• <-- Frame2.html -->
<html>
<body>
<h2>This Is Frame 2</h2>
Full Name : <input type="text" id="tf1"
value="">
Contact Number : <input type="text" id="tf2"
value="">
</body>
</html>
Calling child window functions and writing
on it.
• - Example:
<-- Main.html -->
<html>
<head>
<title>Main File</title>
</head>
<frameset rows="50%, 50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</html>
• <-- Frame1.html -->
<html>
<body>
<h2>This Is Frame 1</h2>
<input type="button" value="Call Function"
onclick="parent.frame2.display()">
</body>
</html>
• <-- Frame2.html -->
<html>
<body>
<h2>This Is Frame 2</h2>
<-- This is the function that will be called by frame 1 -->
<script language="javascript" type="text/javascript">
function display()
{
document.write("This function is called by frame 1");
}
</script>
</body>
</html>
Changing Dynamically Source Of Frame.
• - Example:
<-- Main.html -->
<html>
<head> <title>Main File</title>
</head>
<frameset rows="50%, 50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2"> </frameset>
</html>
• <-- Frame1.html -->
<html>
<body> <h2>This Is Frame 1</h2>
<button onclick="changeSource()">Open Login Page
</button>
<script language="javascript" type="text/javascript">
function changeSource() {
parent.frame2.location.href="login.html";
}
</script>
</body>
</html>
• <-- Frame2.html -->
<html>
<body> <h2>This Is Frame 2</h2>
</body>
</html>
• Login.hmtl
<html>
<head> <title>login page</title> </head>
<body> <h2>User Login </h2>
Enter your username: <br>
<input type="text" id="name"> <br><br>
Enter your password: <br>
<input type="password" id="password"> <br><br>
<input type="button" value="Login">
</body>
</html>
Key Points
• - Frames allow for content segmentation but
have limitations.
• - JavaScript enables inter-frame
communication and dynamic changes.
• - Invisible borders and function calls can
enhance user experience.

You might also like