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

Mysql 5.7.17 winx64 installation tutorial on win7

Software version and platform: MySQL-5.7.17-winx6...

Simple usage examples of MySQL custom functions

This article uses examples to illustrate the usag...

Linux remote login implementation tutorial analysis

Linux is generally used as a server, and the serv...

Solve the problem of qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in Qt under Ubuntu 18.04

Problem Description After installing Qt5.15.0, an...

How to use & and nohup in the background of Linux

When we work in a terminal or console, we may not...

Nginx cache configuration example

When developing and debugging a web application, ...

Analysis of the issues and solutions for repeated submission, repeated refresh, and backoff prevention

one. Preface <br />You will see this kind of...

Solution to MySQL being unable to start due to excessive memory configuration

Problem Description MySQL reports an error when s...

Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class

How to modify the style of the el-select componen...

Detailed explanation of the construction and use of docker private warehouse

1. Download the repository image docker pull regi...

Implementation of restoring data by directly copying files in the data directory in mysql

mysql copies the files in the data directory to r...

Simple implementation of html hiding scroll bar

1. HTML tags with attributes XML/HTML CodeCopy co...

Simple Mysql backup BAT script sharing under Windows

Preface This article introduces a simple BAT scri...

Two ways to clear float in HTML

1. Clear floating method 1 Set the height of the ...

A brief discussion on order reconstruction: MySQL sharding

Table of contents 1. Objectives 2. Environmental ...