Scribd
Upload
504 views

Frames in Javascript

Frames allow splitting a browser window into multiple sections to display different content. Frames are defined using <frameset> tags and individual frames are defined using <frame> tags. While frames were previously used for page layouts, they have accessibility and usability issues. CSS is now commonly used instead for page layouts. Iframes can embed content inline but are different than frames which define page layouts.

Uploaded by

YOGI HETAL
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
504 views

Frames in Javascript

Frames allow splitting a browser window into multiple sections to display different content. Frames are defined using <frameset> tags and individual frames are defined using <frame> tags. While frames were previously used for page layouts, they have accessibility and usability issues. CSS is now commonly used instead for page layouts. Iframes can embed content inline but are different than frames which define page layouts.

Uploaded by

YOGI HETAL
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

How To Use <frame> Tags In HTML

Lots of modern websites have sticky navigation menus that are


visible either in the page sidebar or at the top of the page as you
scroll up and down the page. However, the CSS features that make
sticky navigation possible haven't always been supported by web
browsers. Before this effect could be created with CSS, the
HTML frameset and frame elements were used to create page
layouts in which certain content remained visible while other
content was scrollable.

The Difference Between Frames and Iframes


When you use frameset you split the visual real estate of a browser
window into multiple frames. Each frame has it's own contents and the
content in one don't spill into the next.
An iframe, on the other hand, embeds a frame directly inline with the
other elements of a webpage.
While both frames and iframes perform a similar function – embedding
a resource into a webpage – they are fundamentally different.

 Frames are layout-defining elements.


 Iframes are a content-adding elements.

The Problem with Frames

 Usability challenges: With the rise in popularity of mobile devices and


tablets with small displays it's more important than ever that websites
offer multiple views which change based on the size of the device
viewport. While frames can be manipulated to provide a certain degree
of responsiveness, they are simply not well-suited to creating responsive
websites.
 Accessibility challenges: Screen readers and other assistive technologies
have a very hard time understanding and communicating websites that
use frames.

In addition to the accessibility and usability issues created by frames, the


trend within web design is to separate the content of a webpage from its
presentation.

Content should be added and defined by markup such as HTML.


 Presentation should be manipulated with languages like CSS and
JavaScript.

Using frames is primarily about creating a specific look and layout, a


presentation task that should really be handled with CSS.

The Future of Frames


While all modern browser offer support for frames today, the W3C has
unequivocally stated that frames “are not to be used by Web developers”
and that support for frames in web browsers is offered for historical
purposes only.

How to Create Frames


While frames should not be used for new websites, learning how to use
frames can be beneficial for webmasters who are managing older
websites.
The Basic Idea Behind Frames
The basic concept behind frames is pretty simple:

 Use the frameset element in place of the body element in an HTML


document.
 Use the frame element to create frames for the content of the web page.
 Use the src attribute to identify the resource that should be loaded inside
each frame.
 Create a different file with the contents for each frame.

Let's look at a few examples of how this works. First we need a few
HTML documents to work with. Let's create four different HTML
documents. Here's what the first will contain:

<!DOCTYPE html>
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

The first document we'll save as frame_1.html. The other three


documents will have similar contents and follow the same naming
sequence.
Creating Vertical Columns
To create a set of four vertical columns, we need to use
the frameset element with the cols attribute.
The cols attribute is used to define the number and size of columns
the frameset will contain. In our case, we have four files to display, so
we need four frames. To create four frames we need to assign four
comma-separated values to the cols attribute.
To make things simple we're going to assign the value * to each of the
frames, this will cause them to be automatically sized to fill the available
space.
Here's what our HTML markup looks like.
<!DOCTYPE html>
<html>
<frameset cols="*,*,*,*">
<frame src="../file_path/frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
Creating Horizontal Rows
Rows of frames can be created by using the rows attribute rather than
the cols attribute as shown in the HTML below.

<!DOCTYPE html>
<html>
<frameset rows="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
Mixing Columns and Rows
Columns and rows of frames can both appear on the same webpage by
nesting one frameset inside of another. To do this, we first create
a frameset and then nest a child frameset within the parent element.

<frameset cols="*,*,*">
<frameset rows="*,*"> <frame src="frame_1.html">
<frame src="frame_2.html">
</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>

The nested frameset takes the place of the first frame within the parent
element. The nested element can be placed in any position. For example,
if we wanted the nested element to appear in the center position we
would just rearrange the elements like this.

<frameset cols="*,*,*">
<frame src="frame_1.html">
<frameset rows="*,*">
<frame src="frame_2.html">
<frame src="frame_3.html">
</frameset>
<frame src="frame_4.html">
</frameset>

Sizing Frames
Frames can be sized either in pixels or percentages, or they can be set to
automatically adjust in size based on the available space. To specify the
size of a frame, insert the desired value in the cols or rows attribute.
By default, unless the attribute noresize is added to a frame, website
visitors can use their mouse to drag the border between two frames to
resize the frames. If this is undesirable, the attribute noresize can be
applied to a frame element to prevent resizing.
We can create this layout with the following code.
<frameset rows="150px,*">
<frame noresize src="frame_1.html">
<frameset cols="20%,*,20%">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</frameset>

Formatting Frame Margins & Borders


Now that we have our layout defined, we can increase or decrease the
margin between the frames and also remove the border between the
frames if we wish to do so. Using the layout we created in the previous
step, let's remove the borders between the three columns, but leave the
border between the upper and lower rows. Let's also add some margin
around the contents of the first frame.

<frameset rows="150px,*">
<frame noresize src="frame_1.html" marginheight="15">
<frameset cols="20%,*,20%">
<frame src="frame_2.html" frameborder="0">
<frame src="frame_3.html" frameborder="0">
<frame src="frame_4.html" frameborder="0">
</frameset>
</frameset>

The marginheight attribute applied to the first frame will add 15px of
margin above and below the content loaded in the first frame.
The frameborder value of 0 removes the borders from around the three
bottom frames.
If we pull up this code in a browser, here's what it looks like.

How to Make Frames Responsive


One of the problems with frames is that they tend to create usability
issues for website visitors using smartphones and small tablets. Since
frames have been removed from HTML5 entirely and deemed obsolete,
it's important that the owners of websites built with frames begin
planning a redesign that does not include frames. However, until a full
redesign can be completed, there are a few things webmasters can do to
improve the usability of framed designs.
Use Rows Rather than Columns
If possible, organize frames into rows rather than columns. It is much
easier to navigate through content vertically than horizontally on a small
screen and frames that are arranged into rows are much easier to view on
a small screen than those arranged into columns.
If we compress our column and row layouts onto a simulation of an
Apple iPhone 6 screen we can see how rows are easier to view than
columns.

Use Percentages For Column Widths


When columns are sized using percentages rather than pixels they will
automatically resize based on the size of the device being used to view
the site. While this may create some issues if certain frames become too
small, a visitor's experience will be better overall when column widths
are assigned based on percentages rather than pixels.

Window frames Property


Definition and Usage

The frames property returns an array-like object, which represents all


<iframe> elements in the current window.

The <iframe> elements can be accessed by index numbers. The index


starts at 0.

Tip: Use frames.length to find the number of frames.

Note: This property will also work for <frame> elements. However, the
<frame> element is not supported in HTML5.

This property is read-only.


<!DOCTYPE html>

<html>

<body>

<p>Click the button to change the location of the first iframe element
(index 0).</p>

<button onclick="myFunction()">Try it</button>

<br><br>

<iframe src="https://www.w3schools.com"></iframe>

<iframe src="https://www.w3schools.com"></iframe>

<script>

function myFunction() {

window.frames[0].location = "https://www.w3schools.com/jsref/";

</script>

</body>

</html>
<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through the frames on this page, and change
the location of every frame to "w3schools.com".</p>

<button onclick="myFunction()">Try it</button>


<br><br>

<iframe src="https://www.cnn.com"></iframe>
<iframe src="https://www.bbc.com"></iframe>
<iframe src="https://www.nytimes.com"></iframe>

<script>
function myFunction() {
var frames = window.frames;
var i;

for (i = 0; i < frames.length; i++) {


frames[i].location = "https://www.w3schools.com";
}
}
</script>
</body>
</html>

You might also like