freeCodeCamp/guide/chinese/html/iframes/index.md

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文档 。