1，定义
iFrame是内联框架的缩写，它是HTML元素的一个组件，允许在页面中嵌入文档、视频和交互式媒体。通过这样做，可以在主页上显示一个辅助页面。
iFrame元素允许包含来自其他源的内容，它可以在页面的任何地方集成内容，而不必像传统元素那样将内容包含在web布局的结构中。
但是过度使用iFrame会降低页面速度，并带来安全风险，把iFrame看作是内容的一部分，而不是站点的一部分。例如，如果您想添加一个爱奇艺视频来吸引读者，那么可以向该文章插入一个iFrame元素。
2，iFrame的使用方法
可以在HTML文档中使用< iFrame >标记插入iFrame元素，复制以下代码并粘贴到记事本，并将文件保存为.html格式:
<iframe src="视频地址" width="680" height="480" allowfullscreen=""></iframe>
iFrame源(src)是来自外部或内部服务器的内容的源，不要忘记将嵌入的代码放在URL中。
宽度和高度是iFrame的长宽比，您可以像示例中那样插入固定大小，如680×480像素(px)。或者，您可以使用基于百分比(10%-100%)的方法自动调整iFrame。
例子1：
实例讲解：html中标签的使用方法
首先新建两个HTML页面，一个命名为iframe-content.html，另一个命名为iframe.html，在iframe-content.html中添加内容，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
<p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
<p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
<p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
</body>
</html>
然后用标签将iframe-content.html文件嵌入到iframe.html中，可以根据自己的需要设置样式，此例将frameborder设为0，不需要边框， 将scrolling设为no，不需要滚动条，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe-content.html" width="400px" height="150px" frameborder="0"
scrolling="no"></iframe>
</body>
</html>
有边框和滚动条的效果图：
没有边框和滚动条的效果图：
例子2：
当页面中有大部分内容相同时，比如页面的头部和底部，我们就可以使用标签将重复的部分嵌入页面中，这样可以减少代码的重复率，减轻代码量，但不足之处是页面url地址没有改变。
3，iFrame的安全威胁
本质上，iFrame元素不会对web页面或读者造成任何安全风险，在一定程度上，它的开发是为了帮助内容制作者向读者添加具有视觉吸引力的材料。不过，在从不可信的站点添加iFrame时需要注意。
2008年，在一些合法的网站，如ABC新闻，iFrame代码注入激增。这类攻击会将访问者重定向到恶意站点，然后恶意站点会在访问者的PC上安装病毒，或试图窃取敏感信息，这就是为什么不建议将iFrame包含在网站中。
总而言之，如果您希望为访问者提供更多的参与，iFrame是一个强大的互动元素。把iFrame看作是制作内容的一部分，而不是网站的一个组成部分。但是不应该过度使用iFrame，如果仍然需要将其用于开发目的，请记住只使用来自可靠站点的内容。
1520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
