Как показать живое предварительное просмотрение в небольшом всплывающем окне связанной страницы по мыши над ссылкой?

Ответ 1

Вы можете использовать iframe для отображения предварительного просмотра страницы при наведении курсора мыши.

http://jsbin.com/urarem/3/edit

HTML:

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.

CSS

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

Вот пример с несколькими предварительными просмотрами ссылок.

Ответ 2

Вы можете просмотреть предварительный просмотр ссылки с помощью javascript, используя следующий код.

<p id="p1"><a href="http://cnet.com">Cnet</a></p>
<p id="p2"><a href="http://codegena.com">Codegena</a></p>
<p id="p3"><a href="http://apple.com">Apple</a></p>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">     
  <script type="text/javascript">
    $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
  </script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>

Ответ 3

Я сделал небольшой плагин, чтобы показать окно iframe для предварительного просмотра ссылки. Еще в бета-версии. Возможно, это подходит вашему делу: https://github.com/Fischer-L/previewbox.

Ответ 4

Еще один способ - использовать сервис предварительного просмотра эскизов/ссылок веб-сайта LinkPeek (даже если вы видите скриншот StackOverflow в качестве демонстрационного права теперь), URL2PNG, Browshot, Websnapr или alternative.

Ответ 5

Вы не можете сделать какой-либо живой просмотр связанной страницы в Javascript, но вы можете показать страницу в iframe при наведении курсора мыши.

Ответ 6

Вы можете сделать следующее:

• Создайте (или найдите) службу, которая отображает URL-адреса в виде изображений предварительного просмотра.
• Загрузите это изображение с помощью мыши и покажите его
• Если вы навязчивы в жизни, используйте плагин Timer для jQuery для перезагрузки изображения через некоторое время.

Конечно, на самом деле это не так.

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

Ответ 7

Лично я бы избежал iframe и пошел с тегом embed, чтобы создать представление в окне mouseover.

<embed src="http://www.btf-internet.com" width="600" height="400" />