Вопрос об использовании iframes на страницах запуска Safari и Chrome

Question

Если вы когда-либо использовали новую версию Chrome или Safari, вы знаете, что когда вы добавляете новую вкладку, экран по умолчанию представляет собой сетку, как ваши любимые ссылки, ожидающие нажатия. Что делает его еще лучше, так это графический интерфейс с реальными фотографиями веб-сайтов, которые они представляют.

Я собираюсь сделать что-то подобное, как это делается? Они просто iframes? iframes установлен с помощью css? Если у кого-то есть какие-либо знания о фактической реализации этого, казалось бы, простого жеста, пожалуйста, поделитесь !! Спасибо

Answer 1

Это просто кэшированные миниатюры изображений, которые браузер сделал при последнем посещении страницы. Это не настоящие страницы браузера, с которыми вы можете взаимодействовать.

Чтобы сделать это с другой веб-страницы, вам нужно, чтобы ваш сервер извлек страницу, отобразил ее и уменьшил изображение. Или воспользуйтесь сторонним сервисом, который сделает это за вас. В любом случае, вы не получите точно такое же изображение, которое увидит пользователь, так как у него может быть аутентификация или настройки, к которым ваш сервер не относится.

Answer 2

В Chrome я могу выбрать «Просмотр источника» (Ctrl + U) или использовать веб-инспектор (Shift + Ctrl + I) для просмотра страницы «Новая вкладка». Эти миниатюры действительно являются скриншотами окон браузера (и динамически добавляются в DOM с использованием JavaScript, поэтому вы не найдете их при просмотре источника страницы), так как источник такого эскиза выглядит (скопировано из Web Inspector):

<a class="thumbnail-container" tabindex="1" id="t1" style="left: 235px; top: 0px; " href="http://www.ns.nl/">
  <div class="edit-mode-border">
    <div class="edit-bar">
      <div class="pin" title="Keep on this page"></div>
      <div class="spacer"></div>
      <div class="remove" title="Don't show on this page"></div>
    </div>
    <span class="thumbnail-wrapper" style="background-image: url(chrome://thumb/http://www.ns.nl/); ">
      <span class="thumbnail"></span>
    </span>
  </div>
  <div class="title">
    <div style="background-image: url(chrome://favicon/http://www.ns.nl/); " dir="ltr" title="Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers">Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers</div>
  </div>
</a>

Полагаю, Safari делает то же самое, но сейчас не могу это проверить.

Answer 3

Насколько я вижу в Chrome, это не сделано с iframes. Кажется, что Chrome использует скриншоты из предыдущего посещения. По крайней мере, я не чувствовал, что фон изменился после того, как я увидел его в первый раз. Таким образом, я предполагаю, что начальная страница в Chrome является "пользовательской", как не в HTML. Что касается Safari, я действительно понятия не имею.