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>

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:

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:

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>

(5) In the <Iframe> tag,

The parameter settings and their meanings of the above code

allowTransparency="true"

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

(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

Vue implements the packaging and use of components to control the number of goods

The difference between html Frame, Iframe and Frameset

10.4.3 Frame parameter settings

10.4.4 Differences between Frame and Iframe

10.4.5 Set Iframe to be transparent

Vue implements the packaging and use of components to control the number of goods

Detailed steps to install Anaconda on Linux (Ubuntu 18.04)

Node+Express test server performance

How is MySQL transaction isolation achieved?

Detailed Example of MySQL InnoDB Locking Mechanism

The visual design path of the website should conform to user habits

Detailed explanation of JS ES6 coding standards

HTML Editing Basics (A Must-Read for Newbies)

Difference and principle analysis of Nginx forward and reverse proxy

CSS to achieve Tik Tok subscription button animation effect

Recommend

Detailed explanation of commonly used styles in CSS3 [Basic text and font styles]

Pure CSS to achieve cool neon light effect (with demo)

Linux nohup to run programs in the background and view them (nohup and &)

Summary of learning HTML tags and basic elements

A brief discussion on the manifestation and value selection method of innodb_autoinc_lock_mode

Summary of basic knowledge points of MySql database

MySQL table addition, deletion, modification and query basic tutorial

Detailed explanation of TypeScript 2.0 marked union types

JavaScript adds event listeners to event delegation in batches. Detailed process

Solution to the bug that IE6 select cannot be covered by div

Detailed explanation of command to view log files in Linux environment

MySQL transaction details

How to view and clean up Docker container logs (tested and effective)

How many pixels should a web page be designed in?

JavaScript implements large file upload processing