7

在 Safari 的 Top Sites 部分，iCloud.com 图片显示的是徽标而不是登录屏幕，如下所示。通常，Top Sites 只显示加载网页的图片（加载的页面看起来不是这样）。你知道他们是如何做到这一点的吗？我在 Apple 的文档中找不到任何内容。谢谢你的帮助。

在此处输入图像描述

4

5 回答 5

7

以下是在 iCloud 上显示热门站点特定预览的方法：（为格式化而编辑）

if (window.navigator && window.navigator.loadPurpose === "preview") {
    window.location.href = "http://www.icloud.com/topsites_preview/";
};

资料来源：http ://blog.raffael.me/post/18565169038/defining-how-your-website-looks-like-in-safari-topsites

于 2012-06-18T02:59:22.507 回答
6

事实上，Safari 并不搜索<link>标签或其他任何东西。我们可以使用两种不同的东西：

  • PHP中传入请求的 HTTP 标头。

  • JavaScriptwindow中对象的属性。

这两种方法效果很好，你可以使用其中任何一种，如果你想确定的话，甚至可以同时使用它们。

PHP：

如果我们检查 HTTP 标头，我们将看到当发送请求的是Safari Top Sites PreviewX_PURPOSE时，它被设置为preview. 然后你必须在正常的网站上写：

if($_SERVER["HTTP_X_PURPOSE"]=="preview")
{
    header("Location:thumbnail link");//Redirect to the thumbnail.
}
//Display the normal website.

您可以在有缩略图的页面中添加：

if($_SERVER["HTTP_X_PURPOSE"]!="preview")
{
    header("Location:normal link");//Redirect to the normal website.
}
//Display the thumbnail.

这样除了Safari Top Sites Preview之外，您无法看到缩略图。

JavaScript：

window.navigator.loadPurposepreview如果它是尝试打开网站的Safari Top Sites Preview ，则具有该值。但window.navigator如果它在正常视图中，则不存在。因此，当你测试这个值时，你必须测试这个属性的存在以及它的真实性。然后这是普通网站的代码：

if(window.navigator&&window.navigator.loadPurpose==="preview")
{
    window.location.href="thumbnail link";//Redirect to the thumbnail
}

对于缩略图页面：

if(!window.navigator||window.navigator.loadPurpose!=="preview")
{
    window.location.href="normal link";//Redirect to the normal website
}

我的小技巧：

如果你真的想放一个<link>标签，你可以写：

<link rel="safari-preview" href="thumbnail link" />

然后在 head 部分的末尾添加：

<script>for(var i=0,link=document.getElementsByTagName("link"),l=link.length;i<l;i++)if(link[i].getAttribute("rel")==="safari-preview"&&window.navigator&&window.navigator.loadPurpose==="preview")window.location.href=link[i].getAttribute("href");</script>

资料来源：

于 2012-06-18T10:36:21.653 回答
0

Apple 触控设备可以在您的网络服务器上查找预先合成的图像。我知道它可以查询这些图像：

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • 苹果触摸图标 57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png

如果您查看 iCloud.com 的源代码，您会注意到它也会有<link />指向这些资源的元素（因为它们不在根目录中）：

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/system/cloudos/en-us/1JPlus21/source/resources/images/apple-touch-icon-114x114.png">

我只是在这里猜测，但也许 safari 会寻找相同的图像以显示在顶部站点视图中。

可以在此处找到有关这些类型图像的更多信息

http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/

于 2012-06-16T01:03:58.173 回答
0

我认为他们是专门为他们的 iCloud 服务制作的，他们只是检查域是否是 icloud 域，如果是，他们会显示此徽标而不是正常的站点预览。

于 2012-06-15T21:39:11.127 回答
0

我相信他们会在页面加载完成后以编程方式抓取页面的快照。如果您查看顶部的进度条，当 iCloud 显示（只是 iCloud 徽标）时，它已完成加载并正在做一个小动画。

于 2012-06-15T18:30:01.043 回答