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="https://www.ancii.com" target="myframe">Tutorial</a> <a href="https://www.ancii.com" 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中的内容视为来自与文档其余部分相同的位置