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/
• 我自己的測試。