HTML学习笔记：＜iframe＞内嵌框架元素

<iframe>双标签：内嵌框架元素

概念

可以实现在一个网页中嵌入另一个网页或者视频等外部资源

主要属性

src

被嵌入网页的URL路径

width&height

iframe框架可以设置宽高

name

可以将该属性的值当作一个房间号，该房间号可作为<a>等元素的target属性值
那么，<a>链接到的网页会被嵌入到相应房间号的iframe框架中

示例代码：
HTML：

<h1>iframe框架name属性示例</h1>
<a href="https://www.bilibili.com" target="content">哔哩哔哩</a>
<a href="https://www.baidu.com" target="content">百度</a>
<iframe src="https://www.baidu.com" frameborder="0" name="content" width="100%" height="900px"></iframe>

CSS：

a { text-decoration: none;color: black;margin-right: 5px;}
iframe {margin-top: 20px;}

iframe的优缺点(面试)

• 优点

  独立性，嵌入的网页之间以及与被嵌入网页之间都互不影响，独立运行加载

• 缺点

  1.性能问题，当某网页中嵌入多个iframe框架，每个框架需要独立加载运行，可能会导致该网页性能差的问题
  2.可访问性问题，像屏幕阅读器等辅助技术可能无法正确的阅读iframe中的内容
  3.安全性问题，嵌入内容若为不可信任网页，会出现安全风险

★防止自己的网站被别人iframe嵌入，需在自己网页中输入以下代码

if(top!=self){
    top.location=self.location;
}
//该页面是否会被嵌套，如果是，则会自动跳转定向到该网页自身，不会出现嵌套