位置: IT常识 - 正文
iframe框架一个页面中嵌套到另外一个页面(如何进行iframe框架切换)
编辑：rootadmin推荐整理分享iframe框架一个页面中嵌套到另外一个页面(如何进行iframe框架切换)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:iframe嵌套多个页面,iframe框架嵌入一个网页,怎么把iframe框架居中放置,iframe框架嵌入一个网页,怎么把iframe框架居中放置,iframe框架使用方法左右部分,iframe框架嵌入一个网页,iframe多个页面,内容如对您有帮助，希望把文章链接给更多的朋友！
在一个页面中嵌套另外一个页面，就要使用到框架<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>的属性。
常用属性属性值描述frameborder10规定是否显示框架周围的边框。heightpixels%规定 iframe 的高度。scrollingyesnoauto规定是否在 iframe 中显示滚动条。srcURL规定在 iframe 中显示的文档的 URL。widthpixels%定义 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从不显示滚动条（即使需要）。特别说明iframe标签可以实现页面嵌套页面的功能，可以丰富我们的页面，但是这个功能不建议使用，原因是iframe不利于当前网页的搜索引擎优化，所以要使用iframe标签嵌套需要酌情考虑。
当你学习到这篇教程的时候，已经掌握了大部分的html标签知识了，接下来我们就可以学习CSS样式表了，千万不要半途而废哦，CSS也很好玩的。
上一篇：04-vscode搭建cmake的编译环境(vscode+cmake)
