阅读(1839)

HTML iframe

最后一次修改 2017年08月03日

HTML iframe

iframe 元素在现有元素中嵌入另一个HTML文档。

它有局部属性: src,srcdoc,name,width,height,sandbox,seamless

HTML5中的 sandbox seamless属性是新增的。

longdesc,align,allowtransparency,frameborder,marginheight,marginwidth scrolling属性已过时。

以下代码显示如何使用iframe元素。

<!DOCTYPE HTML>
<html>
<body>
  <a href="http://www.html.cn" target="myframe">Tutorial</a>
    <a href="http://www.html.cn" target="myframe">Tutorial</a>
  <iframe name="myframe" width="300" height="300"> </iframe>
</body>
</html>

注意

将创建名称属性值为 myframe iframe 。这将创建一个名为 myframe 的浏览上下文。

然后,这个浏览上下文在其他元素的目标属性中使用 - 特别是a,form,button,input和base。

a 元素来创建一对超链接,这些超链接会将其href属性中指定的网址加载到iframe中。

width和height属性指定大小(以像素为单位)。src属性指定应最初加载并显示在iframe中的网址。

srcdoc属性允许您定义一个内嵌显示的HTML文档。

seamless属性设置浏览器显示iframe,如同它们是主HTML文档的组成部分。

否则,默认情况下会应用边框,如果内容大于width和height属性,则会出现滚动条。


iframe sandbox

sandbox 属性对HTML文档应用限制。当应用没有值的属性时,如下所示:

...
<iframe sandbox  name="myframe" width="300" height="100">
</iframe>
...

以下是禁用:

  • scripts

  • forms

  • plugins

  • 定位其他浏览上下文的链接

您可以通过为sandbox属性定义值来启用各个功能,如下所示:

...
<iframe sandbox="allow-forms" name="myframe" width="300" height="100">
</iframe>
...

可以使用的值的集合在下面的列表中描述。

  • allow-forms - 启用表单

  • allow-scripts - 启用脚本

  • allow-top-navigation - 允许定位到顶级浏览上下文的链接,这样可以将整个文档替换为另一个文档,也可以创建新的标签页或窗口

  • allow-same-origin - 允许将iframe中的内容视为来自与文档其余部分相同的位置