内联框架允许您在页面上包含来自外部源的内容
内联框架通常被称为“内联框架”,它是HTML5允许的唯一框架类型。 这些框架基本上是您“切出”的页面的一部分。 在您已经删除的页面中,您可以在外部网页中输入内容。 从本质上讲,iframe是另一个浏览器窗口,它恰好位于您的网页内部。 您可以在需要包含Google地图或YouTube视频等外部内容的网站上看到常用的内嵌框架。
这两个受欢迎的网站都在嵌入代码中使用iframe。
如何使用IFRAME元素
该元素使用HTML5全局元素以及其他几个元素。 四个也是HTML 4.01中的属性:
- - 框架来源的URL
- - 窗户的高度
- - 窗户的宽度
- - 窗口的名字
另外三个是HTML5中的新功能:
- srcdoc - 框架来源的HTML。 该属性优先于src属性中的任何URL
- 沙箱 - 在框架窗口中应该允许或不允许的功能列表
- 无缝 - 提供iframe应该呈现的用户代理,就像它不可见地是父文档的一部分
要构建简单的iframe,请设置源URL和宽度和高度:
请注意,您可以选择不将像素值用于iframe的设置,但可以决定使用百分比。
如果您正在构建一个响应式网站,其大小应根据不同的屏幕大小进行更改,这些百分比将非常重要。
还有一些属性在HTML 4.01中有效,但在HTML5中已过时。 由于今天大多数网站都使用HTML5 +,因此这些属性是您不想使用的属性(但您可能会在某些传统文档中看到)。
- - 使用A元素链接到描述
- 使用CSS浮动属性
- allowtransparency--反之,使用CSS background属性使ifram透明
- - 使用边框CSS属性
- marginheight -相反,使用CSS保证金属性
- marginwidth-inside,使用CSS保证金属性
- 相反,使用CSS溢出属性
IFRAME浏览器支持
所有现代浏览器都支持IFRAME元素:
- Android的
- 铬
- 火狐
- Internet Explorer 2+
- iOS / Safari移动
- Netscape 7+
- Opera 3+
- 苹果浏览器
如果上面的列表中没有显示版本号,那是因为该浏览器的所有版本都支持它。
需要注意的一点是,虽然所有浏览器都支持IFRAME元素,但对某些HTML5功能的支持仍然有限。
- 使用溢出来关闭滚动并不可靠。 如果你不想在你的iframe上使用滚动条,你应该继续使用滚动属性。
- 目前,任何浏览器都不支持srcdoc,沙箱和无缝属性。
与Iframes链接
当你给你的内联框架一个名字或ID时,你可以用这个框架上的链接指向A元素上的属性。 然后,当用户点击链接时,它会在引用的iframe中而不是当前窗口中打开。
亲自尝试一下。 在网页中输入以下内容:
如果在IFRAME中打开的文档没有设置任何目标 ,那么所有这些链接将在与母文档相同的iframe中打开。
您可以使用此功能使一个 IFRAME中的链接更改同一页面上另一个IFRAME的内容。
IFrames和安全
IFRAME元素本身不会对您或您的读者造成安全风险。
不幸的是,iframe的声誉很差,因为它们可以被恶意网站用来包含可以感染访问者电脑的内容,而不会在网页上看到它。 这是通过链接指向不可见的IFRAME和这些脚本引发恶意代码来完成的。 用户点击链接并认为链接被破坏,因为似乎没有任何事情发生,但脚本被阻止,他们看不到它。
也有计算机病毒会将不可见的IFRAME注入到您的网页中,从而有效地将您的网站变成僵尸网络。 他们可以通过SQL注入和其他攻击来做到这一点。
在您的网页上添加IFRAME时要记住的事情是,您的用户只与您链接到的所有网站的内容一样安全。 如果您有理由认为网站不值得信任,请不要以任何方式链接到网站,绝对不要将其内容包含在IFRAME中。 但是,链接到您自己的内置页面页面不会对您或您的用户造成安全风险。
Jennifer Krynin的原创文章。 Jeremy Girard于11/7/16编辑