HTML iframe frame

 HTML iframe is a kind of frame, also known as built-in frame or inline frame, used to embed another webpage in a webpage, for example, it is very popular now to embed Facebook fan group to blog or personal website, and add likes to website content Or sharing buttons are common application methods. HTML iframe can set the space occupied by the webpage to be embedded, such as the width and height, and can also set whether to display borders or scrolls. Almost all mainstream browsers support HTML iframe frames grammar.

HTML iframe basic syntax

<iframe src="URL of the webpage to be embedded"></iframe>

The standard HTML iframe frame syntax is from the beginning of <iframe> to the end of </iframe>. The src in the <iframe> tag at the beginning is used to specify the URL of the webpage to be embedded. If you want to write more complete, you can write it in < Add "prompt text not supported by browser" between iframe> and </iframe>. When the browser used by the user does not support HTML iframe, the prompt text can be displayed to let the user know that a part of the content is not displayed.

HTML iframe frame width and height settings

<iframe src="URL of the webpage to be embedded" width="width" height="height"></iframe>

If you want to add width and height to the iframe, you only need to use the width and height attributes. The default attribute unit is px. For example, "width="200" height="200"" means width and height. The height is 200px, but for management efficiency, it is recommended to write "width="200px" height="200px"" for completeness. If you want to use a percentage as the unit of size, you must write the percentage, such as " width="30%" height="50%"", otherwise the browser may mistakenly think that px is used as the unit.

HTML iframe frame border display and hide

<iframe src="URL of the webpage to be embedded" frameborder="0"></iframe>

The original style of web design may affect the original visual effect after being embedded in another web page. The abrupt border can be said to be quite obvious. Fortunately, the iframe provides the function of hiding the border. In the example, frameborder=" 0" means to hide the border, if frameborder="1", it means to show the border.

HTML iframe frame scrolling scroll

<iframe src="URL of the webpage to be embedded" scrolling="no"></iframe>

Since it is embedded in another webpage, it is likely to encounter the size difference between the webpage size and the display block of the main webpage. The embedded webpage may be large or have a lot of content. It is convenient to use scrolling. The scrolling property of iframe To set whether to display the scroll, scrolling has three attribute values, yes for displaying the scroll, no for not displaying the scroll, and auto for automatically displaying according to the size of the webpage.

Attribute mix and match

<iframe src="URL of the webpage to be embedded" width="200" height="200" frameborder="0" scrolling="no"></iframe>

The above several commonly used attributes can be used in the design of an iframe frame at the same time to adjust the most suitable embedding size and shape. Assuming that all attributes are used, it will look like an example when written, meaning that one should be embedded For a frame with a width and height of 200px, the border and scroll are not displayed.

About the way to open a new window for iframe content

HTML iframe is a framework function, which is only used to embed the content of other URLs. As for the content embedded through iframe, if you want to allow netizens to open in a new window, such as being embedded in a web page or For the Facebook fan group of the blog, netizens can go directly to the official Facebook website from the Facebook fan group in the webpage. The decision is based on whether the link in the "embedded page" uses the "target="_blank" attribute or not. It is the "open web page in new window" attribute of the hyperlink.