Usage of iframe tag (attribute, transparency, adaptive height)


1. Definition and usage of iframe

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

Differences between HTML and XHTML

The iframe element is not supported in HTML 4.1 strict DTD and XHTML 1.0 strict DTD.

Tips and notes:

Tip: you can place the required text between < iframe > and < / iframe > so that you can deal with browsers that cannot understand iframe.

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


attribute value describe DTD
  • left
  • right
  • top
  • middle
  • bottom

They are not in favor of using.Please use style instead.

Specifies how to align the frame based on the surrounding elements.

  • 1
  • 0
Specifies whether the border around the frame is displayed. TF
  • pixels
  • %
Specify the height of the iframe. TF
longdesc URL Specify a page that contains a longer description of 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
  • yes
  • no
  • auto
Specifies whether the scroll bar is displayed in the iframe. TF
src URL Specifies the URL of the document to be displayed in the iframe. TF
  • pixels
  • %
Defines the width of the iframe. TF


Copy code

The code is as follows:

<iframe src=”” width=”200″ height=”500″>
Developer uses framework technology, but your browser does not support framework. Please upgrade your browser to access developer normally.

Using pixels to define the size of the iframe frame

Copy code

The code is as follows:

<iframe src=”” width=”20%” height=”50%”>
Developer uses framework technology, but your browser does not support framework. Please upgrade your browser to access developer normally.

Define iframe frame size with percentage

2. Iframe transparent

In the < body > tag of transparentbody.htm file, I have added the following four iframe writing methods: style = “background color = transparent”. I think you should have a clear understanding of the implementation method of iframe background transparency effect

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>

Iframe is forced to use, because the use of iframe will bring more problems, and some browsers can set the iframe as an advertising screen.

Recently, I used iframe in my work. At first, I encountered the problem of highly adaptive iframe. I found a solution to this problem in the blog of ued team. Later, I encountered the problem of transparent iframe

Usually, the background color of iframe will be white, and there may be 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 it needs to be transparent

The solution is found by Google searching iframe transparently

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, if no color is set in the iframe page
Note: the transparency of iframe is mainly due to the use of allowtransparency = “true” style = “background color = transparent”
< strong > 3. Adaptive height of iframe
< / strong > due to the long space, you can check it here
<a target=”_blank” href=””></a>
< strong > 4. Output iframe advertisement code through JS
document.write(‘<iframe align=middle marginwidth=0 marginheight=0 src=”” 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=”” width=”100%” height=”200″>
Your browser does not support embedded frames or is currently configured not to display embedded frames.