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

How is a SQL statement executed in MySQL?

Table of contents 1. Analysis of MySQL architectu...

Detailed explanation of Linux one-line command to process batch files

Preface The best method may not be the one you ca...

Detailed tutorial for installing ffmpeg under Linux

1. Install ffmpeg under centos linux 1. Download ...

Three Discussions on Iframe Adaptive Height Code

When building a B/S system interface, you often en...

SSH port forwarding to achieve intranet penetration

The machines in our LAN can access the external n...

Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment

This article describes how to install mysql5.7.16...

mysql indexof function usage instructions

As shown below: LOCATE(substr,str) Returns the fi...

Several ways to center a box in Web development

1. Record several methods of centering the box: 1...

Teach you how to use charAt() in JavaScript to count the most frequently appearing characters and their number of occurrences

Previously, I introduced the use of the charAt() ...

Detailed explanation of the difference between JavaScript spread operator and rest operator

Table of contents What is the rest operator? How ...

Share 8 very useful CSS development tools

CSS3 Patterns Gallery This CSS3 pattern library s...

Implementation of Grid common layout

No gaps on both sides, gaps between each column w...

JavaScript to implement login form

This article example shares the specific code of ...

React useMemo and useCallback usage scenarios

Table of contents useMemo useCallback useMemo We ...

Implementing a puzzle game with js

This article shares the specific code of js to im...