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

How to solve the element movement caused by hover-generated border

Preface Sometimes when hover pseudo-class adds a ...

getdata table table data join mysql method

public function json_product_list($where, $order)...

How to install MySQL 8.0 database on M1 chip (picture and text)

1. Download First of all, I would like to recomme...

Super detailed MySQL usage specification sharing

Recently, there have been many database-related o...

How to build lnmp environment in docker

Create a project directory mkdir php Create the f...

Class in front-end JavaScript

Table of contents 1. Class 1.1 constructor() 1.2 ...

Implement a simple data response system

Table of contents 1. Dep 2. Understand obverser 3...

Detailed explanation of the lock structure in MySQL

Mysql supports 3 types of lock structures Table-l...

CSS sets the list style and creates the navigation menu implementation code

1. Set the list symbol list-style-type: attribute...

Building command line applications with JavaScript

Table of contents 1. Install node 2. Install Comm...

Complete steps to quickly configure HugePages under Linux system

Preface Regarding HugePages and Oracle database o...

Detailed explanation of Vue's SSR server-side rendering example

Why use Server-Side Rendering (SSR) Better SEO, s...

Summary of Textarea line break issues in HTML

Recently, I encountered a problem of whether the d...

MySQL master-slave synchronization principle and application

Table of contents 1. Master-slave synchronization...

Thinking about grid design of web pages

<br />Original address: http://andymao.com/a...