Detailed explanation of iframe tag usage (attributes, transparency, adaptive height)

Detailed explanation of iframe tag usage (attributes, transparency, adaptive height)

1. iframe definition and usage

 The iframe element creates an inline frame (or inline frame) that contains another document.

Differences between HTML and XHTML

 In HTML 4.1 Strict DTD and XHTML 1.0 Strict DTD, the iframe element is not supported.

Tips and Notes:

 Tip: You can put the required text between <iframe> and </iframe> to cope with browsers that don't understand iframes.

Iframe tags appear in pairs, starting with <iframe> and ending with </iframe>

The content in the iframe tag can be displayed when the browser does not support the iframe tag

property

property value describe DTD
align
  • left
  • right
  • top
  • middle
  • bottom

Deprecated. Please use styles instead.

Specifies how to align this frame with respect to surrounding elements.

 TF
frameborder
  • 1
  • 0
 Specifies whether to show a border around the frame TF
height
  • pixels
  • %
 Specifies the height of the iframe. TF
longdesc URL Specifies a page that contains a longer description of the iframe. TF
marginheight pixels Defines the top and bottom margins of the iframe. TF
marginwidth pixels Defines the left and right margins of the iframe. TF
name frame_name Specifies the name of the iframe. TF
scrolling
  • yes
  • no
  • auto
 Specifies whether scroll bars should be shown in the iframe. TF
src URL Specifies the URL of the document to be displayed in the iframe. TF
width
  • pixels
  • %
 Defines the width of the iframe. TF

Example


Copy code
The code is as follows:

<iframe src="https://www.jb51.net" width="200" height="500">
123WORDPRESS.COM uses frame technology, but your browser does not support frames. Please upgrade your browser to access 123WORDPRESS.COM normally.
</iframe>

Define iframe size in pixels

Copy code
The code is as follows:

<iframe src="http://www.baidu.com" width="20%" height="50%">
123WORDPRESS.COM uses frame technology, but your browser does not support frames. Please upgrade your browser to access 123WORDPRESS.COM normally.
</iframe>

Define iframe frame size using percentage

2. iframe transparency

In the <body> tag of the transparentBody.htm file, I have added style="background-color=transparent". Through the following four IFRAME writing methods, I think you should have a clear understanding of how to achieve the transparent background effect of iframe:


Copy code
The code is as follows:

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>


Iframes are only used as a last resort, because using iframes will cause more problems, and some browsers can be set to block iframes as ads.

I used iframe in a recent work. The problem I encountered at the beginning was the problem of iframe highly adaptive. I found a solution to this problem in the blog of the ued team of Koubei.com. Later, I encountered a problem of iframe transparency.

Usually the background color of the iframe is white, but it may have different colors in different browsers.

If the main page has an overall background color or background image

A white block will appear in the iframe area, which is inconsistent with the main page, so the iframe needs to be transparent.

I found a solution by searching for iframe transparency on Google

Copy code
The code is as follows:

<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe> Of course, the premise is that there is no color set in the iframe page
[code]
Note: iframe transparency mainly uses allowtransparency="true" style="background-color=transparent"
3. iframe adaptive height
</strong>Because the article is too long, you can move here to view it
<a target="_blank" href="https://www.jb51.net/article/15780.htm">https://www.jb51.net/article/15780.htm</a>
4. Output iframe ad code through js
</strong>[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');


5. Sometimes we need to consider whether the user's browser supports the iframe tag, so we need to write it as follows


Copy code
The code is as follows:

<iframe frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height="200">
Your browser does not support iframes or is currently configured not to display iframes.
</iframe>

<<:  display:grid in CSS3, an introduction to grid layout

>>:  Let’s talk in detail about how browsers view closures

Recommend

A brief analysis of the tutorial on installing MySQL 8.0.18 on CentOS 6.8 (RPM method)

Today, I will record how to install MySQL 8.0.18 ...

How to purchase and install Alibaba Cloud servers

1. Purchase a server In the example, the server p...

Vue uniapp realizes the segmenter effect

This article shares the specific code of vue unia...

Tutorial diagram of installing centos7.3 on vmware virtual machine

VMware Preparation CentOS preparation, here is Ce...

How to get USB scanner data using js

This article shares the specific process of js ob...

Why Google and Facebook don't use Docker

The reason for writing this article is that I wan...

Example analysis of MySQL startup and connection methods

Table of contents How to start mysqld Method 1: m...

CSS makes tips boxes, bubble boxes, and triangles

Sometimes our pages will need some prompt boxes o...

Analysis of slow insert cases caused by large transactions in MySQL

【question】 The INSERT statement is one of the mos...

Detailed explanation of 2 methods to synchronize network time in Linux/CentOS system

Due to hardware reasons, the machines may not kee...

Centos8 bridge static IP configuration method in VMware virtual machine

1. Make sure the network connection method is bri...

Example of customizing the style of the form file selection box

Copy code The code is as follows: <!DOCTYPE ht...

js+canvas realizes code rain effect

This article shares the specific code of js+canva...

MySQL cross-table query and cross-table update

Friends who have some basic knowledge of SQL must...

Master-slave synchronization configuration and read-write separation of MySQL database

The benefits of using MySQL master-slave replicat...