iframe标签创建包含另外一个文档的内联框架

最新推荐文章于 2024-07-14 17:41:27 发布

郭小白呀

最新推荐文章于 2024-07-14 17:41:27 发布

阅读量133

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_46372045/article/details/126937416

版权

有一个需求是在某个页面的下边再加一些东西，但是没有这个页面的组件内容，只有一个访问该页面的链接，所以我们就要用iframe标签来根据a标签显示页面，且在那个页面上添加东西。

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

举个栗子（包含一个图片）：

<body>
    <iframe src="/i/eg_landscape.jpg"></iframe>
    <p>一些老的浏览器不支持 iframe。</p>
    <p>如果得不到支持，iframe 是不可见的。</p>
</body>

效果：

包含一个页面：src后面跟的就是那个页面的访问链接，在iframe标签的后边可以写要添加的内容

<iframe
   src="https://xxx"
   width="100%"
   height="100%"
   frameborder="no"
   scrolling="no"
></iframe>

关注