The difference between HTML iframe and frameset_PowerNode Java Academy

Introduction

1.<iframe> tag: iframe is an inline frame that generates an internal frame in the page.

2. <frameset> tag: frameset defines a frame set, which contains multiple sub-frames, each of which has an independent document.

<iframe> Tag

Iframe is an inline frame, which generates an internal frame in the page.

property

frameborder{int}: whether to display the frame border;

src{URL}: specifies the URI of a resource (such as a web page or image);

scrolling{boolean}: whether to display the scroll bar of the frame;

width{int}: defines the width of the iframe;

height{int}: defines the height of the iframe;

Example

<body>
<h3>HTML Tag Demonstration</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>

Precautions

When adding content in "<iframe>I am content</iframe>", the added content will not be displayed on the display page. So let's use the src attribute to specify a page.

Application Scenario

1) On the version upgrade page, if there are too many version logs, the upgrade information can be placed in an iframe.

2) Rich text editing box, such as the [New Essay] area in Blog Garden.

<frameset> Tag

Frameset defines a frame set, which contains multiple frames, each of which has an independent document.

Format

<frameset>
  <frame src=a.htm />
  <frame src=b.htm />
  <noframes></noframes>
</frameset>

Sub-item Description

<framesrc=a.htm />: Subframe<noframes></noframes>: Content displayed when the browser does not support this frame.

property

frameset attributes:

rows: indicates that the subframe is laid out in rows ( ). Take two subframes as an example: rows="30%,*" means the first frame takes up 30% of the height of the entire page, and the second takes up the rest; cols: means the subframes are laid out in columns ( ). Take two sub-frames as an example: cols="30%,*" means that the first frame takes up 30% of the length of the entire page, and the second takes up the rest; noresize="noresize" means that the range of the sub-frame will not be adjusted.

frame attribute:

src: URI pointing to a resource (such as a page, picture, etc.);

name: Specifies the name of the frame to facilitate operations between frames.

Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>frameset demo</title>
</head>
<frameset rows="30%,*" noresize="noresize">
    <frame src=DateGrid.htm name="frm1" />
    <frame src=Dialog.htm name="frm2"/>
    <noframes></noframes>
</frameset>
</html>

Precautions

When using the frameset tag, be sure to remove the outer <body></body> tags.

Operations between subframes

Referring to the sample code, frm1 changes the page pointed to by the subset of frm2: window.parent.frames["frm2"].location.href = 'b.htm'

Application Scenario

1) Management of the background page, the menu is displayed on the left, and the detailed page is displayed in the right frame.

2) Function menu page, such as bbs.csdn.net

Quick Facts

When browsing the frames in a page, right-click inside the frame page to display additional frame information.

Take Chrome as an example:

<<: Solve the problem of not being able to enter breakpoints when using GDB in Docker

>>: MySQL Flush-List and dirty page flushing mechanism

Additional instructions for using getters and actions in Vuex

The difference between HTML iframe and frameset_PowerNode Java Academy

Additional instructions for using getters and actions in Vuex

Implementation of navigation bar and drop-down menu in CSS

MySQL Order By Multi-Field Sorting Rules Code Example

MySQL not null constraint case explanation

HTML table tag tutorial (24): horizontal alignment attribute of the row ALIGN

Solve the error problem caused by modifying mysql data_dir

Express implements login verification

Analysis of the advantages of path.join() in Node.js

Interpreting MySQL client and server protocols

What is WML?

Recommend

MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10

How to change fixed positioning of child elements to absolute positioning by CSS3 transform

jQuery canvas draws picture verification code example

impress.js presentation layer framework (demonstration tool) - first experience

Summary of seven sorting algorithms implemented in JavaScript (recommended!)

MySQL data analysis storage engine example explanation

Docker deploys mysql to achieve remote connection sample code

Basic usage details of Vue componentization

Description of meta viewport attribute in HTML web page

Detailed explanation of MySQL master-slave replication practice - GTID-based replication

Detailed explanation of redundant and duplicate indexes in MySQL

How to install redis5.0.3 in docker

Detailed explanation of Linux inotify real-time backup implementation method

Implementation of vue+drf+third-party sliding verification code access

ReactHooks batch update state and get route parameters example analysis