Explain the difference between iframe and frame in HTML with examples

Explain the difference between iframe and frame in HTML with examples

I don't know if you have used the frameset attribute in your project. I used the frameset attribute in the production of an online customer service system last year. Because the customer service system needs a fixed layout, with one piece on the top, one piece on the bottom, and so on, I used frameset and frame at that time. After I played around with these attributes, I understood the difference between iframe and frame. Because before this, I generally didn't use frames in my projects, and if I did, I would use iframes.

Let’s talk about the specific differences below! The following points are summarized.

1. Frame cannot be used alone without frameSet, but iframe can;

2. Frame cannot be placed in body;

The following can be displayed normally:

XML/HTML CodeCopy content to clipboard
  1. <!--<body>-->     
  2. < frameset   rows = "50%,*" >     
  3.     < frame     name = "frame1"     src = "test1.htm" />      
  4.     < frame     name = "frame2"     src = "test2.htm" />      
  5. </frameset>     
  6. <!--<body>-->    

The following cannot be displayed normally:

XML/HTML CodeCopy content to clipboard
  1. < body >     
  2. < frameset   rows = "50%,*" >     
  3.     < frame     name = "frame1"     src = "test1.htm" />      
  4.     < frame     name = "frame2"     src = "test2.htm" />      
  5. </frameset>     
  6. < body >    

On the contrary, if the iframe is placed under the frameSet attribute, it must be placed in the body

XML/HTML CodeCopy content to clipboard
  1. < body >     
  2.    < frameset >      
  3.      < iframe     name = "frame1"     src = "test1.htm" />      
  4.      < iframe     name = "frame2"     src = "test2.htm" />      
  5.    </frameset>      
  6. </ body >    

3. iframe is an HTML tag and can be used anywhere in HTML, but frame cannot.

XML/HTML CodeCopy content to clipboard
  1. < body >     
  2.     < iframe     name = "frame1"     src = "test1.htm" />      
  3.     < iframe     name = "frame2"     src = "test2.htm" />      
  4. </ body >   
  5.   
  6. < table >     
  7. < tr >     
  8. < td > < iframe   id = ""   src = "" > </ iframe > </ td > < td > </ td >     
  9. </ tr >     
  10. </ table >    

The frame must be nested in the frameSet and cannot be used in tags such as table.

4. The height of the frame can only be controlled by frameSet; the iframe can be controlled by itself, not by frameSet

XML/HTML CodeCopy content to clipboard
  1. <!--<body>-->     
  2. < frameset   rows = "50%,*" >     
  3.     < frame     name = "frame1"     src = "test1.htm" />      
  4.     < frame     name = "frame2"     src = "test2.htm" />      
  5. </frameset>     
  6. <!--</body>-->     
  7.   
  8. < body >     
  9. < frameset >     
  10.     < iframe   height = "30%"    name = "frame1"     src = "test1.htm" />      
  11.     < iframe   height = "100"    name = "frame2"     src = "test2.htm" />      
  12. </frameset>     
  13. </ body >    

5. If more than two iframes are used on the same page, they can be displayed normally in IE, but only the first one can be displayed in Firefox. Using more than two frames can work normally in both IE and Firefox.

<<:  Summary and examples of vue3 component communication methods

>>:  Tips to prevent others from saving as my web page and copying my site

Recommend

Tutorial on deploying jdk and tomcat on centos7 without interface

1. Install xshell6 2. Create a server connection ...

A Brief Analysis of Subqueries and Advanced Applications in MySql Database

Subquery in MySql database: Subquery: nesting ano...

Solve the splicing problem of deleting conditions in myBatis

I just learned mybatis today and did some simple ...

Detailed explanation of MySQL 30 military rules

1. Basic Specifications (1) InnoDB storage engine...

Vue implements an Input component that gets the key display shortcut key effect

I encountered a requirement to customize shortcut...

Dynamic starry sky background implemented with CSS3

Result:Implementation Code html <link href=...

Multiple ways to calculate age by birthday in MySQL

I didn't use MySQL very often before, and I w...

Analyzing the MySql CURRENT_TIMESTAMP function by example

When creating a time field DEFAULT CURRENT_TIMEST...

MYSQL METADATA LOCK (MDL LOCK) theory and lock type test

Table of contents MYSQL METADATA LOCK (MDL LOCK) ...

Solution to the problem of z-index not taking effect in CSS3

I recently wrote a combination of CSS3 and js, an...

Implementation code of jquery step progress axis plug-in

A jQuery plugin every day - step progress axis st...

Implementation example of uploading multiple attachments in Vue

Table of contents Preface Core code File shows pa...