关于在 Safari 和 Chrome 的启动页面中使用 iframe 的问题答案

【问题标题】：Question regarding the use of iframes in Safari and Chrome's startup pages关于在 Safari 和 Chrome 的启动页面中使用 iframe 的问题
【发布时间】：2011-02-20 02:35:38
【问题描述】：

如果您曾经使用过 Chrome 或 Safari 的新版本，您就会知道，当您添加一个新标签时，默认屏幕是一个网格状的设置，您最喜欢的链接就在那里等待被点击。让它变得更好的是图形界面，以及它们所代表的网站的实际图片。

我想做类似的事情，它是怎么做的？它们只是 iframe 吗？用css设置的iframe？如果有人对这个看似简单的活动的实际实现有任何了解，请分享！谢谢

【问题讨论】：

标签： html css iframe safari google-chrome

【解决方案1】：

它们只是浏览器上次访问页面时创建的缓存缩略图。它们不是您可以与之交互的真实浏览器页面。

要从另一个网页执行此操作，您必须让您的服务器获取该页面、呈现它并缩略图图像。或者使用为您完成此操作的第三方服务。无论哪种方式，您都不会获得用户会看到的完全相同的图像，因为他们可能具有您的服务器不知道的身份验证或设置。

【讨论】：

【解决方案2】：

在 Chrome 中，我可以选择查看源代码 (Ctrl+U) 或使用 Web 检查器 (Shift+Ctrl+I) 来查看“新标签”页面。这些缩略图确实是浏览器窗口的屏幕截图（并使用 JavaScript 动态添加到 DOM，因此在查看页面源时您不会找到它们），因为此类缩略图的源看起来像（从 Web Inspector 复制）：

<a class="thumbnail-container" tabindex="1" id="t1" style="left: 235px; top: 0px; " href="http://www.ns.nl/">
  <div class="edit-mode-border">
    <div class="edit-bar">
      <div class="pin" title="Keep on this page"></div>
      <div class="spacer"></div>
      <div class="remove" title="Don't show on this page"></div>
    </div>
    <span class="thumbnail-wrapper" style="background-image: url(chrome://thumb/http://www.ns.nl/); ">
      <span class="thumbnail"></span>
    </span>
  </div>
  <div class="title">
    <div style="background-image: url(chrome://favicon/http://www.ns.nl/); " dir="ltr" title="Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers">Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers</div>
  </div>
</a>

我猜 Safari 的做法或多或少是一样的，但我目前无法检查。

【讨论】：

【解决方案3】：

据我在 Chrome 中看到的，iframe 并没有做到这一点。似乎 Chrome 使用的是之前访问的屏幕截图。至少我没有经历过第一次看到后背景发生了变化。所以我的猜测是chrome中的初始页面是“自定义”的，而不是Html。至于 Safari，我真的不知道。

【讨论】：