Safari热门网站预览

Question

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

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

资料来源:

• http://sunpig.com/martin/archives/2010/01/08/how-to-detect-a-page-request-from-safari-4s-top-sites-feature.html
• http://daneden.me/2011/12/custom-safari-top-sites-thumbnail/
• 我自己的测试.