HTML frame

By using frames, you can display more than one page in the same browser window.

iframe syntax:

<iframe src="URL"></iframe>

This URL points to a different web page.

Iframe - Set height and width

The height and width attributes are used to define the height and width of the iframe tag.

The attribute defaults to pixels, but you can specify that it be displayed proportionally (e.g.: "80%").

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>


</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Iframe - remove the border

frameborder attribute In defining iframe, it indicates whether to display the border.

Set the attribute value to "0" to remove the iframe border:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<iframe src="http://www.w3cschool.cc/" width="200" height="200" frameborder="0">
 <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

</body>
</html>

Run the example»

Click the "Run Instance" button to view the online instance

Use iframe to display the directory link page

iframe can display a target link page

The attributes of the target link must use the attributes of iframe, as shown in the following example:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.php.cn" target="iframe_a">php.cn</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>

Running example»

Click the "Run Instance" button to view the online instance

HTML iframe tag

tag	Description
<iframe>	Define an inline iframe