内联框架(通常称为“iframe”)是HTML5中允许的唯一框架类型。这些框架实际上是您“剪切”的页面的一部分。在您剪切出页面的空间中,您可以输入外部网页。从本质上讲,iframe是在您的网页内设置的另一个浏览器窗口。您可以在需要包含外部内容(如Google地图或YouTube视频)的网站上常用的代码iframe。这两个热门网站都在其嵌入代码中使用iframe。
如何使用IFRAME元素
该元素使用HTML5全局元素以及其他几个元素。四个也是HTML 4.01中的属性:
- - 帧源的URL
- - 窗户的高度
- - 窗户的宽度
- - 窗口的名称
HTML5中有三个是新的:
srcdoc- 框架源的HTML。此属性优先于。中的任何URLSRC属性砂箱- 框架窗口中应允许或禁止的功能列表无缝-tells iframe应该呈现的用户代理,就像它不可见地是父文档的一部分一样
要构建简单的iframe,请设置源URL以及宽度和高度:
请注意,您可以选择不将像素值用于iframe的设置,但可以决定使用百分比。如果您要构建响应式网站,其大小应根据不同的屏幕大小而变化,则这些百分比将非常重要。
还有一些属性在HTML 4.01中有效,但在HTML5中已过时。由于今天大多数网站都使用HTML5 +,因此这些属性是您不想使用的(但您可能会在某些旧文档中看到)。
- - 不要,用一个
一个要链接到说明的元素 - -instead,使用CSS
浮动属性 ALLOWTRANSPARENCY-instead,使用CSS背景使ifram透明的属性- - 不要使用
边界CSS属性 MARGINHEIGHT-instead,使用CSS余量属性MARGINWIDTH-instead,使用CSS余量属性- -instead,使用CSS
溢出属性
IFRAME浏览器支持
该 IFRAME 所有现代浏览器都支持元素:
- Android的
- 铬
- 火狐
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- 苹果浏览器
如果上面的列表中没有显示版本号,那是因为该浏览器的所有版本都支持它。
需要注意的是,虽然所有浏览器都支持 IFRAME 对于某些HTML5功能,仍然有限的支持。
- 运用
溢出关闭滚动是不可靠的。如果您不想在iframe上使用滚动条,则应继续使用滚动属性。 - 该
srcdoc,砂箱,和无缝目前,任何浏览器都不支持这些属性。
与iframe链接
当你给你的iframe一个 名称 要么 ID 然后,您可以将该链接指向该框架上的属性 一个 元件。然后,当用户点击链接时,它将在引用的iframe内打开,而不是在当前窗口中打开。
亲自尝试一下。在网页中键入以下内容:
这是我的iframe
单击此链接时,它将在上面的窗口中打开一个新文档。
ID = “myIframe” src =“http://webdesign.about.com/#lp-main”height =“200px”width =“500px”>
如果文件打开了 IFRAME 没有设置任何目标,那么所有这些链接将在与父文档相同的iframe中打开。
您可以使用此功能在一个链接中创建链接 IFRAME 改变另一个的内容 IFRAME 在同一页上。
IFrames和安全
该 IFRAME 元素本身对您或您的读者不构成安全风险。不幸的是,iframe的声誉很差,因为恶意网站可以使用这些内容来包含可以感染访问者计算机的内容,而无需他们在页面上看到它。这是通过让链接指向不可见来完成的 IFRAME 这些脚本引发了恶意代码。用户单击该链接并认为该链接已损坏,因为似乎没有发生任何事情,但是脚本在他们无法看到的地方被设置。
也有计算机病毒会注入隐形 IFRAME 进入您的网页,有效地将您的网站变成僵尸网络。他们可以通过SQL注入和其他攻击来做到这一点。
包括一个时要记住的事情 IFRAME 在您的网页上,您的用户只能与您链接到的所有网站的内容一样安全。如果您有理由认为某个网站不值得信任,请不要以任何方式链接到该网站,并且绝对不要将其内容包括在内。 IFRAME。但是,在iframe中链接到您自己的网页不会给您或您的用户带来安全风险。
Jennifer Krynin的原创文章。由Jeremy Girard于11/7/16编辑




