В разделе «Сайты Top Sites» Safari изображение iCloud.com отображает логотип вместо экрана входа в систему, как вы можете видеть ниже. Обычно на Top Sites отображается только изображение загруженной веб-страницы (и загруженная страница выглядит не так). Вы хоть представляете, как они это сделали? Я не мог найти ничего в документации Apple. Спасибо за вашу помощь.Предварительный просмотр сайтов Safari
Вот как это делается на 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
+1 'потому что все имеет смысл. Я также проверил, и этот скрипт находится на вершине сайта icloud. Достаточно создать под шаблоном предварительного просмотра topsites_preview/', и все должно работать. Спасибо, Phil;) –
Я считаю, что они программно захватить снимок страницы, когда он закончил загрузку. И если вы посмотрите на индикатор выполнения вверху, когда iCloud показывает, что (только логотип iCloud), он закончил загрузку и делает небольшую анимацию.
Веб-сайт никогда не показывает JUST логотип, хотя он никогда не будет такого размера. –
Я думаю, что они сделали это специально для их службы iCloud, они просто проверяют, является ли домен доменом icloud, и если он отображает этот логотип вместо обычного предварительного просмотра сайта.
Устройства Apple touch могут искать предварительно созданные изображения на вашем веб-сервере. Я знаю, что он может запросить для этих изображений:
Если вы проверить Souce из 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">
Я просто угадываю здесь, но, возможно, сафари ищут те же изображения, что и в верхней части сайта.
Подробнее об этих типах изображений можно найти здесь
http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/
В последнее время я сделал несколько сайтов с прикрепленными иконами iPhone, поэтому, если вы ответите правильно, вместо печатного экрана я должен получить специальную иконку, но после добавления сайта на верхние сайты я не получил ничего, кроме файла prints моего сайта. Поэтому я думаю, что это что-то еще или что-то еще. –
@ Sófka выглядит, как Фил понял это (если это работает) Я просто догадывался :) – sg3s
Yep;) Я проверил эту теорию, потому что это было интересно;) Всегда хорошо попробовать! Cheers;) –
На самом деле, Safari не ищет тег <link> или что-то еще. Существует два dfifferent вещь, которую мы можем использовать:
HTTP-заголовки входящего запроса в PHP.
Свойства объекта window в JavaScript.
Два способа работают очень хорошо, и вы можете использовать любой из них или даже их обоих, если хотите быть уверенными.
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:
window.navigator.loadPurpose имеет значение preview, если это 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
}
Маленькая хитрость от меня:
Если вы действительно хотите поставить a <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>
Источники:
Есть что-то, чего я не понимаю: цель щедрот состояла в том, чтобы иметь лучший ответ, чем тот, который у Фила и с более подробной информацией. Тогда почему ты предложил щедрость Филу, а не мне? – Mageek
@ Mageek Извините, я начал щедрость до того, как Фил ответил, потому что ни один из ответов не был прав. Я очень ценю ваш ответ, но Фил ответил первым. Я дал вам голос. –
Вы подождали до конца щедрости? – Mageek