The difference between html Frame, Iframe and Frameset

The difference between html Frame, Iframe and Frameset

10.4.1 The difference between Frameset and Frame First, let’s explain the difference between Frameset and Frame.

<Frameset></Frameset> is used to divide frames, and each frame is marked by <Frame></Frame>. <Frame></Frame> must be used within <Frameset></Frameset>. The code is as follows:

<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">

<FRAME src="inc/admin_center.htm" name=main scrolling="no">

</FRAMESET>

In the above example, <Frameset></Frameset> divides the page into two parts, the page in the left frame is admin_left.htm, and the page in the right frame is admin_center.htm.

Note: The frame order of the <Frame></Frame> tag is from left to right or from top to bottom.

The differences between the two are as follows:

● <Frameset> is a frame tag, which indicates that the web document is composed of frames and sets the layout of the frames that make up the frameset in the document.

● <Frame> is used to set the properties of each frame in the frameset.

10.4.2 Frameset parameter settings
<Frameset> needs to set some specific parameters, which directly determine the layout of the entire page. The code is as follows:

<Frameset border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

The parameter settings and their meanings of the above code are shown in Table 10.3.

Table 10.3 Frameset parameters

Parameters

illustrate

Border

Set the border thickness of the frame in pixels.

frameborder

Set whether to display the frame border, 0 means not to display, 1 means to display

FrameSpacing

Indicates the distance between frames

BorderColor

Set the frame border color

Row

Divide the document into upper and lower frames. The value after Row can be a number or percentage. * means occupying the remaining space. The number of numbers represents the number of frames divided horizontally. For example, Rows="210,*,10%" means that the page is divided into three frames: upper, middle and lower. The upper frame occupies 210px, the lower frame occupies 10% of the entire document, and the remaining space is occupied by the middle frame. * is a relative concept. For example, Row=* means that there is no frame layout with upper and lower structures in the page.

Cols

Same settings as Row

10.4.3 Frame parameter settings

Regarding the setting of Frame parameters, the code is as follows:

As shown in Table 10.4.

Table 10.4 Frame parameters

Parameters

illustrate

Name

Set the name of the framework, must be in English

Src

Set the page path and name displayed in the frame. It can be a relative path or an absolute path.

Marginwidth

Indicates the distance from the left and right edges of the frame

Marginheight

Indicates the distance between the frame and the upper and lower edges

Scrolling

Set whether to display the scroll bar in the frame. Yes means display, No means not display, and Auto means that the scroll bar will be automatically displayed when the content in the frame page exceeds the size of the frame.

Frameborder

Set whether to display the frame border, 0 means not to display, 1 means to display

Noresize

Set whether the user can change the size of the frame. If this option is not set, the browser can drag the frame at will to change the size of the frame

Framespacing

Indicates the distance between frames

Bordercolor

Set the frame border color

10.4.4 Differences between Frame and Iframe

The functions that Frame and Iframe can achieve are basically the same, but Iframe has more flexibility than Frame.

The Iframe tag, also known as the floating frame tag, can be used to embed an HTML document in an HTML document for display. The biggest difference between it and the Frame tag is that the content contained in the <Iframe></Iframe> embedded in the web page is an integral part of the entire page, while the content contained in <Frame></Frame> is an independent individual and can be displayed independently. In addition, the application of Iframe can also display the same content multiple times in the same page without having to repeat the code of this content.

The page shown in Figure 10.21 uses Iframe to create pagination links at the top and bottom of the page. The codes are the same. You only need to embed the same file in the web page without repeating the code. For the actual effect of this case, please refer to the case /frame/iframe/see_infomore_iframe.htm in the accompanying book CD.

10.4.5 Set Iframe to be transparent

Another great benefit of Iframe is that you can set the frame to be transparent, so that the background inside the frame is the same as the background of the main page. In the above example, careful readers will find this problem. The following is a detailed explanation of how to set the Iframe to be transparent. The specific steps are as follows:

(1) Open the example in the CD-ROM /frame/iframe/see_infomore_iframe1.htm.

(2) When browsing the page file in a browser, you will find that the background of the original cell is covered in the area where the Iframe is inserted. This is not the desired effect.

(3) Open the page.htm page, switch to code view, and insert the following code in the <body> tag:

<body style="background-color=transparent">

Figure 10.21 Using Iframe to create page turning

(4) Switch see_infomore_iframe1.htm to code view and check the code for the cell that inserts the Iframe into the page as follows:

<td height="30" colspan="4" >

<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm"></iframe>

</td>

(5) In the <Iframe> tag,

<frame name="left" src=" index_manager/admin_left.htm " marginwidth="1" marginheight="1" scrolling="no" frameborder="1" noresize framespacing="2" bordercolor="#cc0000">

The parameter settings and their meanings of the above code

allowTransparency="true"

(6) The cell code for inserting Iframe is as follows:

<td height="30" colspan="4" >

<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>

(7) Save the two pages page.htm and see_infomore_iframe1.htm, and browse the results in a browser.

<<:  How to change the root password in a container using Docker

>>:  CSS Sticky Footer Several Implementations

Recommend

About dynamically adding routes based on user permissions in Vue

Display different menu pages according to the use...

Completely uninstall mysql. Personal test!

Cleanly uninstall MySQL. Personally tested, this ...

CSS3 radar scan map sample code

Use CSS3 to achieve cool radar scanning pictures:...

Example code for implementing the nine-grid layout of dynamic images with CSS

Precondition: content="width=750" <m...

10 issues that must be considered when designing and building large-scale website architecture

We are not discussing PHP, JSP or .NET environmen...

MySQL 8.0.20 Installation Tutorial with Pictures and Text (Windows 64-bit)

1: Download from mysql official website https://d...

Should the Like function use MySQL or Redis?

Table of contents 1. Common mistakes made by begi...

Vue project implements graphic verification code

This article example shares the specific code of ...

MySQL database case sensitivity issue

In MySQL, databases correspond to directories wit...

How to use the realip module in Nginx basic learning

Preface There are two types of nginx modules, off...

Solution to mysql error when modifying sql_mode

Table of contents A murder caused by ERR 1067 The...

Solution to the error when installing Docker on CentOS version

1. Version Information # cat /etc/system-release ...

Docker image import and export code examples

Import and export of Docker images This article i...

Detailed explanation of Javascript Echarts air quality map effect

We need to first combine the air quality data wit...

CSS3 realizes the animation effect of lotus blooming

Let’s look at the effect first: This effect looks...