IFrame Label usage explained (attribute, transparent, adaptive height)

Source: Internet
Author: User

1. IFRAME Definition and usage

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

The difference between HTML and XHTML

IFRAME elements are not supported in the HTML 4.1 Strict DTD and XHTML 1.0 Strict DTD.

Tips and Comments:

Tip: You can place the required text between <iframe> and </iframe> so that you can deal with browsers that don't understand the IFRAME.

IFRAME tags are paired and end with <iframe> start,</iframe>

Content within the IFRAME tag can be displayed when the browser does not support IFRAME tags

Property

Properties value Description DTD
Align
  • Left
  • Right
  • Top
  • Middle
  • Bottom

Do not approve of use. Please use style instead.

Specifies how this frame is aligned to the surrounding elements.

Tf
Frameborder
  • 1
  • 0
Specifies whether the border around the frame is displayed. 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 margins for the left and right sides of the IFRAME. Tf
Name Frame_name Specifies the name of the IFRAME. Tf
Scrolling
  • Yes
  • No
  • Auto
Specifies whether scroll bars are displayed in the IFRAME. Tf
Src Url Specifies the URL of the document to display in the IFRAME. Tf
Width
  • Pixels
  • %
Defines the width of the IFRAME. Tf

Example


Copy CodeThe code is as follows:
<iframe src= "http://www.jb51.net" width= "height=" >
The Scripting House uses frame technology, but your browser does not support frames, please upgrade your browser for normal access to the Scripting House.
</iframe>
Define the IFRAME frame size using pixels

Copy CodeThe code is as follows:
<iframe src= "http://www.baidu.com" width= "20%" height= "50%" >
The Scripting House uses frame technology, but your browser does not support frames, please upgrade your browser for normal access to the Scripting House.
</iframe>
Define the IFRAME frame size using percentages

2, IFrame Transparent

In the <body> tab of the transparentbody.htm file, I have joined style= "Background-color=transparent" Through the following four types of IFrame I think maybe your implementation of the IFRAME background transparency effect should have a clear understanding:


Copy CodeThe code is as follows:
<iframe id= "Frame1" src= "transparentbody.htm" allowtransparency= "true" ></IFRAME>
<iframe id= "Frame2" src= "transparentbody.htm" allowtransparency= "true" style= "</IFRAME>
<iframe id= "Frame3" src= "transparentbody.htm" ></IFRAME>
<iframe id= "Frame4" src= "transparentbody.htm" style= "</IFRAME>

An IFRAME is a necessity, because using an IFRAME can cause more problems, and some browsers may set the IFRAME as an ad mask.

In a recent work on the use of the IFRAME, the beginning of the problem is the IFRAME highly adaptive problem, this issue in the word of Mouth network ued Team Blog found a solution, and later encountered an IFRAME transparent problem

Usually the iframe background will be white and may have different colors under different browsers.

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

A white block appears in the IFrame area and does not coordinate with the main page, which requires the IFRAME to be transparent

Find a solution through Google search iframe transparency

Copy CodeThe 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 the color is not set in the IFRAME page
[Code]
Note: IFrame transparency is mainly used allowtransparency= "true" style= "Background-color=transparent"
<strong>3, iframe Adaptive height
</strong> because the space is too long, you can visit here
<a target= "_blank" href= "http://www.jb51.net/article/15780.htm" >http://www.jb51.net/article/15780.htm</ A>
<strong>4, via JS output iframe AD code
</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 IFRAME tags, then you need the following wording


Copy CodeThe code is as follows:
<iframe frameborder= "0" name= "Iframe1" src= "http://www.jb51.net/" width= "100%" height= ">"
Your browser does not support inline frames, or is currently configured to not display inline frames.
</iframe>

IFrame Label usage explained (attribute, transparent, adaptive height)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.