Question

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

我希望做类似的事情，它是如何完成的？他们只是iframe吗？ iframe用css设置？如果有人对这个看似简单的节目的实际实现有任何了解，请分享!!感谢

Answer 1

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

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

Answer 2

在Chrome中，我可以选择查看源（Ctrl + U）或使用Web Inspector（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的功能大致相同，但我现在无法检查。

Answer 3

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

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

3 个答案: