Question

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

enter image description here

Answer 1

以下是在iCloud上如何显示Top Sites特定预览:(为格式编辑）

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

Answer 2

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

PHP 中传入请求的HTTP标头。
JavaScript 中window对象的属性。

这两种方式非常好用，你可以使用它们中的任何一种，如果你想确定它们，甚至可以使用它们。

<强> PHP ：

如果我们检查HTTP标头，我们会看到当它发送请求的 Safari Top Sites Preview 时，X_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热门网站预览之外，您无法看到缩略图。

<强>的JavaScript ：

如果 Safari热门网站预览试图打开网站，则

window.navigator.loadPurpose的值为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" />标签，你可以写：

<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>

然后在主题部分的末尾添加：

{{1}}

<强>来源：

Answer 3

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

Answer 4

我认为他们特别针对他们的iCloud服务，他们只检查域是否是icloud域，如果是，他们显示此徽标而不是正常的网站预览。

Answer 5

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

苹果触摸图标-114x114-precomposed.png
苹果触摸图标-144x144-precomposed.png
苹果触摸图标-57x57-precomposed.png
苹果触摸图标-最高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/

Safari热门网站预览

5 个答案: