iframe框架一个页面中嵌套到另外一个页面

最新推荐文章于 2025-05-16 10:26:34 发布

wwwarewow

最新推荐文章于 2025-05-16 10:26:34 发布

阅读量1.2w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/JSPSEO/article/details/125706128

前端专栏收录该内容

37 篇文章

订阅专栏

在一个页面中嵌套另外一个页面，就要使用到框架<iframe> 标签。<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

基本语法：

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

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>框架</title>
    </head>
    <body>
        <iframe src="https://www.qingqingblog.com"></iframe>
    </body>
</html>

运行浏览器后得到的效果如图

以上例子展示了<iframe>的用法，在浏览器执行后，<iframe>有个默认的高宽，让整个页面看起来不自然，还需要调整，所以接下来我们还要了解更多关于<iframe>的属性。

常用属性

属性	值	描述
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
src	URL	规定在 iframe 中显示的文档的 URL。
width	pixels %	定义 iframe 的宽度。

1、<iframe> 标签的 frameborder 属性

frameborder 属性规定是否显示 iframe 周围的边框。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>框架</title>
    </head>
    <body>
        <!--不显示 iframe 周围的边框-->
        <iframe src="https://www.qingqingblog.com" frameborder="0"></iframe>
        <br /><br />
        <!--显示 iframe 周围的边框-->
        <iframe src="https://www.qingqingblog.com" frameborder="1"></iframe>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：当frameborder="0"，表示关闭边框；frameborder="1"，表示有边框(默认=1)，出于实用性方面的原因，最好不用设置该属性，请使用 CSS 来应用边框样式和颜色。

2、<iframe> 标签的 height 属性

height 属性规定 iframe 的高度。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>框架</title>
    </head>
    <body>
        <iframe src="https://www.qingqingblog.com" frameborder="0" height="200"></iframe>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：可以是以像素计的高度值（比如 "100），也可以是以包含元素百分比计的高度值（比如 "20%"），注意设置百分比的时候，它的父元素也就是外围必须要指定高度，否则百分比不生效。

3、<iframe> 标签的 scrolling 属性

scrolling 属性规定是否在 iframe 中显示滚动条。

举例：

<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>框架</title>
    </head>
    <body>
        <h3>iframe 中始终显示滚动条：</h3>
        <iframe src="https://www.qingqingblog.com" width="300" height="100" scrolling="yes"></iframe>
        <h3>iframe 中从不显示滚动条：</h3>
        <iframe src="https://www.qingqingblog.com" width="300" height="100" scrolling="no"></iframe>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：scrolling默认的是auto，也就是有滚动条。如果要想隐藏iframe出现的滚动条，可以使用scrolling="no"隐藏滚动条。

scrolling 属性值

值	描述
auto	在需要的情况下出现滚动条（默认值）。
yes	始终显示滚动条（即使不需要）。
no	从不显示滚动条（即使需要）。