How to use the iframe attribute-HTML Tutorial-php.cn

How to use the iframe attribute

小云云

Release： 2017-11-17 09:15:54

Original

3322 people have browsed it

When we learn HTML in the early stages, we will encounter the attribute value of iframe. In fact, iframe is a very interesting tag. Now I will talk about it with junior students. The function of the HTML iframe tag is to create an inline frame (i.e. inline frame) that contains another document. In layman's terms, it is to embed another html page in an html page. This label is relatively common and important in actual work. For example, iframes are basically used in the background of general web projects. When we log in to various mailboxes, we often see the effect of clicking on the link on the left and switching to the web page on the right. This is basically achieved through iframe.

All browsers support iframe tags, so there are no compatibility issues.

The more common usage of iframe is as follows:

<iframe name="main" width="100%" height="200" frameborder="0" scrolling="no" src="http://www.phpernote.com/"></iframe>

Copy after login

The parameters in the above code need to be modified according to the actual situation. Here are some of the more common attributes of iframe.

name Set the name of iframe

longdesc Regarding the description of iframe, this attribute basically does not support current mainstream browsers, so there is no need to use

border to set iframe The width of the edge

bordercolor Sets the color of the iframe border. The value can be an rgb color or a color name

frameboder Sets whether the border is 3-dimensional (0=no, 1=yes)

height sets the height of the iframe (available pixel value or percentage)

width sets the width of the iframe (available pixel value or percentage)

marginheight defines the top and bottom of the iframe Margin

marginwidth defines the left and right margins of the iframe

scrolling Whether there is a scroll bar (possible values are yes, no, auto)

src specified Files called by iframe (can reference files such as: html, htm, gif, jpeg, jpg, png, txt, *.*)

noresize prohibits resizing, this only supports IE core browser

allowtransparency Whether to allow transparency. IE5.5 begins to support the content transparency of floating frames. If you want to define transparent content for a floating frame, the following conditions must be met.

1. The allowTransparency tag attribute used with iframe elements must be set to true.

2. In the iframe content source document, the bgColor tag attribute of the background-color or body element must be set to transparent.

Examples are as follows:
(1) Parent frame page code

<body bgColor="#eeeeee">     
<iframe allowTransparency="true" src="phpernote.html" noresize></iframe>

Copy after login

(2) Child frame page code (i.e. phpernote.html page code)

<body bgColor="transparent">

Copy after login

3 . Specify the id attribute of the iframe and obtain the height and width of the iframe scroll bar

<iframe id="phpernote" src="www.phpernote.com"></iframe>    
<script type="text/javascript">    
var iframe=document.getElementById(&#39;phpernote&#39;);    
document.write(iframe.scrollHeight);//滚动条高度    
document.write(iframe.scrollWidth);//滚动条宽度    
</script>

Copy after login

The above is the detailed description of the iframe attribute. I hope you will have a grasp of it. Next, the editor will share with you how to adapt the iframe height. For the setting method, students in need can pay attention to the PHP Chinese website.

Related recommendations:

Introduction to cross-domain mutual access methods between iframe and main frame

iframe child, parent page intra-domain and cross-domain communication Example

What are the differences between frame and iframe in html

The above is the detailed content of How to use the iframe attribute. For more information, please follow other related articles on the PHP Chinese website!