Вопрос по safari, javascript – Safari Top Sites Preview

7

В разделе «Лучшие сайты» Safari изображение iCloud.com показывает логотип вместо экрана входа в систему, как показано ниже. Обычно на верхних сайтах просто отображается изображение загруженной веб-страницы (и загруженная страница выглядит не так). Ты хоть представляешь, как они этого добились? Я не смог найти ничего в документации Apple. Спасибо за вашу помощь.

enter image description here

Вы подождали до конца награды? Mageek
Есть кое-что, чего я не понимаю: цель награды состояла в том, чтобы получить лучший ответ, чем у Фила, и получить больше подробностей. Тогда почему ты предложил награду Филу, а не мне? Mageek
@Mageek Извините, я начал вознаграждение ДО того, как Фил ответил, поскольку ни один из приведенных ответов не был верным. Я действительно ценю ваш ответ, но Фил ответил первым. Я отдал тебе голос. Jack

Ваш Ответ

5   ответов
7

Вот как это делается в 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

+1 ', потому что все это имеет смысл. Я также проверил, и этот скрипт находится в верхней части сайта icloud. Достаточно создать подtopsites_preview/ шаблон предварительного просмотра и все должно работать. Спасибо Фил;)
0

Я думаю, что они сделали это специально для своего сервиса iCloud, они просто проверяют, является ли домен доменом icloud, и показывают ли они этот логотип вместо обычного предварительного просмотра сайта.

6

На самом деле Safari не ищет<link> тег или что-нибудь еще. Есть две разные вещи, которые мы можем использовать:

  • The HTTP headers of the incoming request in PHP.

  • The properties of the window object in 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 Top Sites Preview.


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
}

Little trick from me:

Если вы действительно хотите поставить<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>

Sources:

@ Симон Нет, я не знаю, прости.
Знаете ли вы, использует ли Chrome ту же технику для получения превью самых популярных страниц?
0

Устройства Apple Touch могут искать предварительно составленные изображения на вашем веб-сервере. Я знаю, что он может запросить эти изображения:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-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/

@ S & # xF3; fka похоже, что Фил понял это (если это работает), я все-таки догадался :)
В последнее время я создал несколько сайтов с прикрепленными значками iPhone, поэтому, если вы ответите правильно, вместо экрана печати я должен получить специальный значок, но после добавления сайта в топ-сайты у меня не осталось ничего, кроме отпечатка экрана моего сайта. Поэтому я думаю, что это что-то еще или нечто большее.
Да;) Я проверил эту теорию, потому что она была интересной;) Всегда полезно попробовать! Ура;)
0

Я считаю, что они программно получают снимок страницы, когда она заканчивается. И если вы посмотрите на индикатор выполнения вверху, когда iCloud показывает это (только логотип iCloud), он завершает загрузку и выполняет небольшую анимацию.

Веб-сайт никогда не показывает просто логотип, и он никогда не будет такого размера. Jack

Похожие вопросы