Safari热门网站预览

Question

在Safari的热门网站部分，iCloud.com图像显示徽标而不是登录屏幕，如下所示。通常，Top Sites只显示加载的网页的图片（并且加载的网页看起来不像这样）。你有什么想法他们如何完成这个？我在Apple的文档中找不到任何东西。谢谢你的帮助。

Answer 1

这里的它是如何在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

Answer 2

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

Answer 3

我认为他们是专门为他们的iCloud服务制作的，他们只是检查该域名是否是icloud域名，是否显示这个标识而不是正常的网站预览。

Answer 4

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

• 苹果触摸图标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/

Answer 5

事实上，Safari不会搜索<link>标记或其他任何东西。还有的是，我们可以用两种dfifferent的事情：在PHP传入请求的

• 的HTTP标头。

• window对象的属性JavaScript。

这两种方式的工作非常好，你可以使用它们中的任何一个，或者如果你想确定它们两个都可以。

---

PHP：

如果我们检查HTTP标头，我们会看到，当它Safari浏览器的Top Sites预览发送请求，有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：

window.navigator.loadPurpose的值为preview如果它是Safari浏览器的Top Sites预览它试图打开该网站。但是，如果它处于正常视图，则window.navigator不存在。因此，当你测试这个值时，你必须测试这个属性的存在以及它的真实性。那么这是正常浏览网页的代码：从我

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

---

小窍门：：

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

而对于缩略图页面

如果你真想把一个<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> 

---

来源：

• 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/
• 我自己的测试。