Detailed explanation of iframe tag usage (attributes, transparency, adaptive height)_HTML/Xhtml_Web page production

1. iframe definition and usage

The iframe element creates an inline frame (ie, 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:

Tips: You can place the required text between

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

Attributes

Properties

value

Description

DTD

align

• left
• right
• top
• middle
• bottom

属性	值	描述	DTD
align	left right top middle bottom	不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。	TF
frameborder	1 0	规定是否显示框架周围的边框。	TF
height	pixels %	规定 iframe 的高度。	TF
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。	TF
marginheight	pixels	定义 iframe 的顶部和底部的边距。	TF
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。	TF
name	frame_name	规定 iframe 的名称。	TF
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。	TF
src	URL	规定在 iframe 中显示的文档的 URL。	TF
width	pixels %	定义 iframe 的宽度。	TF

Deprecated. Please use styles instead. Specifies how this frame should be aligned relative to surrounding elements.

TF

frameborder

• 1
• 0

Specifies whether to display 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 about the iframe.

TF

marginheight

pixels

Define the top and bottom margins of the iframe.

TF

marginwidth

pixels

Define 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 to display scroll bars in iframe.

TF

src

URL

Specifies the URL of the document displayed in the iframe.

TF

width

• pixels
• %

Define the width of the iframe.

TF

Example

Copy code

The code is as follows:

Use pixels to define iframe frame size

Copy code

The code is as follows:

Use percentage to define iframe frame size

2. iframe transparent

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

Copy code

The code is as follows:

iframe is used as a last resort, because using iframe will bring more problems, and some Browsers can be set up to block iframes as ads.

I used iframe in a recent work content. The problem I encountered at first was that the iframe was highly adaptive. I found a solution to this problem in the blog of Ued team of Koubei.com, and later I encountered an iframe. Transparency issue

Usually the background color of iframe will be white, and 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, which requires iframe transparency

I found the solution by searching for iframe transparency on Google

Copy code

The code is as follows:

Of course, the premise is that the color is not set in the iframe page
[code]
Note: iframe transparency mainly uses allowtransparency="true" style="background-color=transparent"
3. iframe adaptive height
Due to The article is too long, you can move here to view
http://www.jb51. net/article/15780.htm
4. Output iframe advertising code through js
[code]
document.write('');

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

Copy code

The code is as follows: