2.6 KiB
2.6 KiB
title | localeTitle |
---|---|
Iframes | I帧 |
I帧
HTML <iframe>
元素表示内联框架,允许您在当前HTML文档中包含独立的HTML文档。 <iframe>
通常用于嵌入第三方媒体,您自己的媒体,小部件,代码段或嵌入第三方小程序(如付款表单)。
属性
下面列出了一些<iframe>
的属性:
|属性|说明| | --- | --- | | allowfullscreen
|设置为true以允许将帧置于全屏模式| | frameborder
|告诉浏览器在框架周围绘制边框(默认设置为1)| | height
| CSS像素中帧的高度 | name
|框架的名称| | src
|要嵌入的网页的URL | width
| CSS像素中帧的宽度|
例子
使用<iframe>
嵌入YouTube视频:
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
frameborder="0" allowfullscreen></iframe>
使用<iframe>
嵌入Google地图:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
替代文字
开始和结束<iframe>
标记之间的内容用作替代文本,如果查看者的浏览器不支持iframe,则显示该文本。
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
定位链接中的iframe
任何<a>
链接都可以定位<iframe>
元素的内容。它不是将浏览器窗口重定向到链接的网页,而是重定向<iframe>
。为此, <a>
元素的target
属性必须与<iframe>
的name
属性匹配。
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>
此示例最初会显示空白<iframe>
,但是当您点击上面的链接时,它会重定向<iframe>
以显示YouTube视频。
Javascript和iframe
嵌入在<iframe>
中的文档可以像往常一样在自己的上下文中运行JavaScript(不会影响父网页)。
父网页与嵌入的<iframe>
内容之间的任何脚本交互都受同源策略的约束。这意味着,如果您从其他域加载<iframe>
的内容,浏览器将阻止使用JavaScript访问该内容的任何尝试。
更多信息:
请参阅MDN Web文档 。