iframe 历史记录_iFrame的好奇历史和古怪性质

iframe 历史记录

The <iframe> element has a somewhat convoluted history: introduced by Microsoft and supported in early versions of Internet Explorer, it was incorporated into HTML 4.0, banished from XHTML, and reintroduced in HTML5.

<iframe>元素有一段令人费解的历史：由Microsoft引入并在Internet Explorer的早期版本中受支持，它被合并到HTML 4.0中，从XHTML驱逐并在HTML5中重新引入。

An <iframe> is easiest to understand as a window onto another document or site: the element’s purpose is to place content from one HTML document in the context of another. This takes place quite literally: when you add an <iframe> to a page, you are looking through a window from that page into another site, with full interactivity within that space. This is why Google Maps and YouTube promote users to embed their content by using an <iframe> element: rather than hosting any portion of the complex web app yourself, your page simply views the web service through an integrated window.

<iframe>最容易理解为另一个文档或站点上的窗口：该元素的目的是将一个HTML文档中的内容放置在另一个HTML或上下文中。 这实际上是发生的：将<iframe>添加到页面时，您正在浏览从该页面到另一个站点的窗口，并且在该空间内具有完全的交互性。 这就是Google Maps和YouTube促使用户使用<iframe>元素来嵌入其内容的原因：您的页面无需自己托管复杂Web应用程序的任何部分，而是仅通过集成窗口查看Web服务。

As a simple example, to open the front page of Metafilter in an <iframe>, you’d use the following code:

作为一个简单的示例，要在<iframe>打开Metafilter的首页，请使用以下代码：

<iframe style="width: 20%; height:300px" src="http://metafilter.com"></iframe>

…which provides the result that you see above. Note that many services, including YouTube, will create far more code for iframes than is necessary, but the only requirement is the src attribute together with a width and height.

…提供您在上面看到的结果。 请注意，包括YouTube在内的许多服务都将为iframe创建比必要数量更多的代码，但唯一的要求是src属性以及width和height 。

iframe安全问题 (iframe security concerns)

Just like an open window in your house, iframes constitute a security concern: as your page communicates with the site within the <iframe>, it can communicate with yours, potentially allowing intrusion into your site.

就像您家中打开的窗户一样，iframe也构成了安全隐患：当您的页面与<iframe>的站点进行通信时，它可以与您的页面进行通信，从而有可能入侵您的站点。

HTML5 introduces the sandbox attribute, which prevents the framed site from execution of or access to any of the following:

HTML5引入了sandbox属性，该属性可防止框架网站执行或访问以下任何一项：

• plugins
  外挂程式
• form submission
  表格提交
• scripts (including JavaScript)
  脚本(包括JavaScript)
• links outside of the frame
  框架外的链接
• access to cookies, local storage, and other pages on the originating domain
  访问Cookie，本地存储以及原始域上的其他页面

sandbox is supported in all modern browsers (IE10, Firefox 17+, Chrome 22+ and Safari 5.1+) with the exception of Opera, making it easy to prevent malicious attacks: <iframe seamless sandbox src=http://distrusted.com></iframe>

除了Opera之外，所有现代浏览器(IE10，Firefox 17 +，Chrome 22+和Safari 5.1+)都支持sandbox ，从而可以轻松防止恶意攻击：<iframe无缝沙箱src = http：//distrusted.com> </ iframe>

可能的iframe性能问题 (Possible iframe performance issues)

Using an <iframe> in your site means that you are running at least two pages in one: the originating page plus the content of the <iframe>. This often doubles or triples the total size of your page. Issues of performance inevitably arise: one recommendation would be to turn off iframes as the viewport narrows, as smaller screens are associated with mobile devices.

在您的站点中使用<iframe>意味着您正在一个页面中至少运行两个页面：原始页面和<iframe>的内容。 这通常会使页面的总大小增加一倍或两倍。 不可避免地会出现性能问题：一种建议是，随着较小的屏幕与移动设备相关联，在视口变窄时关闭iframe。

结论 (Conclusion)

With all of these conditions and limitations, what practical purpose do iframes have? Advertising is one obvious possibility: most ads are delivered in fixed dimensions from a central server, making heavy use of iframes in the destination page. As we’ll see in an upcoming article, the element has far more artistic promotional purposes: it is singularly suited for taking live screenshots of other sites, making frames very useful for creating portfolio pages.

在所有这些条件和限制下，iframe有什么实际用途？ 广告是一种明显的可能性：大多数广告是通过固定尺寸从中央服务器投放的，从而大量使用了目标网页中的iframe。 正如我们将在下一篇文章中看到的那样，该元素具有更多的艺术推广用途：它特别适合拍摄其他网站的实时屏幕快照，使框架对于创建投资组合页面非常有用。

翻译自: https://thenewcode.com/628/The-Curious-History-and-Quirky-Nature-of-iFrames

iframe 历史记录