iframe是HTML5中唯一允许的框架类型，这些框架本质上是您“嵌套”的页面的一部分。在您从页面中剪出的空间中，然后可以在外部网页中调用。实质上，iframe就是设置在网页内部的另一个浏览器窗口。你可以在需要包含外部内容的网站上找到常用的iFrame，比如百度地图或优酷视频，这两个流行的网站都在他们的嵌入代码中使用iframe。在网站建设或者一些B/S系统的网站开发中，iframe应用颇为广泛频繁。这也是本文讨论的主题，接下来让我们一起看看在html5技术下，网站建设时iframe调用方法与注意事项。
如何使用IFRAME元素
该元素使用HTML5全局元素以及其他几个元素。四个也是HTML 4.01中的属性：
HTML5中有三个新特性：
- srcdoc-帧来源的HTML，此属性优先于src属性中的任何URL
- 沙箱-框架窗口中应允许或不允许的功能列表
- 无缝-告诉用户代理应该呈现iframe，就像它是父文档的不可见的一部分一样
要构建简单IFrame，请设置源URL以及宽度和高度：
<iframe src="URL" width="200px" height="200px">
Alternate text if the iframe cannot be rendered
请注意，您可以选择不对iframe的设置使用像素值，但可以决定使用百分比。如果您正在构建一个响应性网站，其大小应随屏幕大小的不同而变化，这些百分比将非常重要。也有一些属性在HTML4.01中有效，但在HTML5中过时。由于目前大多数网站都在使用HTML5+，因此这些属性是您不想使用的(但您可能会在一些遗留文档中看到这些属性)。
- 改为使用A元素链接到说明
- 改为使用CSS浮点属性
- 允许透明-而不是使用CSS背景属性使ifram透明
- 改为使用边框CSS属性
- 边距高度-而不是使用CSS边距属性
- 边距宽度-而不是使用CSS边距属性
- 改为使用CSS溢出属性
支持IFrame的浏览器，几乎所有现代浏览器都支持IFRAME元素，它们分别如下：
- Android
- Chrome
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
如果上面的列表中没有显示版本号，这是因为该浏览器的所有版本都支持它。需要注意的一点是，尽管所有浏览器都支持IFRAME元素，但对HTML5的某些特性的支持仍然有限。使用溢出关闭滚动不可靠。如果不希望在iFrame上使用滚动条，则应继续使用“滚动”属性。此时，任何浏览器都不支持srcdoc、沙箱和无缝属性。
与iFrames链接
当您为iframe指定名称或id时，您可以使用A元素上的属性将链接指向该帧。然后，当用户单击链接时，它将在引用的iframe中打开，而不是在当前窗口中打开。你自己试试，在网页中键入以下内容：
<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200px" width="500px">
When you click <a href="http://webdesign.about.com/od/iframes/a/aaiframe.htm#abt" target="myIframe">this link</a> it will open a new document inside the above window.
如果在iFrame中打开的文档没有设置任何目标，则所有这些链接将在与父文档相同的iframe中打开。可以使用此功能使一个IFRAME中的链接更改同一页上另一个IFRAME的内容。
iFrame和安全
IFRAME元素本身不会对您或您的读者构成安全风险。不幸的是，iframe已经得到了坏名声，因为它们可以被恶意网站用来包含内容，这些内容可以感染访问者的计算机，而不会在页面上看到它。这是通过让链接指向不可见的iframe并通过这些脚本触发恶意代码来完成的。用户单击该链接，并认为该链接已中断，因为似乎没有发生任何事情，但脚本被设置在他们看不到它的地方。
也有计算机病毒，将注入一个看不见的iframe到您的网页，有效地将您的网站变成一个僵尸网络。他们可以通过SQL注入和其他攻击来实现这一点。在网页上包含iframe时要记住的一点是，您的用户仅与您链接到的所有站点的内容一样安全。如果你有理由认为一个网站是不值得信任的，不要以任何方式链接到它，更不要把它的内容包含在IFRAME中。但是，在iframe中链接到您自己的页面并不会给您或您的用户带来安全风险。
立即咨询
高端网站建设
系统软件开发
设计交互制作
年度运维服务
