Question

如何在链接上鼠标悬停的链接页面的小弹出窗口中显示实时预览？

像这样

但是预览

Answer 1

您可以使用iframe在鼠标悬停时显示页面预览。

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;
}

Here's an example with multiple link previews

Answer 2

您可以使用以下代码使用javascript显示链接的实时预览。

＆＃13;

<embed src="https://www.w3schools.com/html/default.asp" width="60" height="40" />
<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>

＆＃13;

在are

了解详情

id="p1" - Fetch image preview on page load.
id="p2" - Fetch preview on hover.
id="p3" - Fetch preview image each time you hover.

Answer 3

就个人而言，我会避免使用iframe并使用embed标签在鼠标悬停框中创建视图。

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

Answer 4

我做了一个小插件来显示iframe窗口来预览链接。仍在测试版。也许它适合你的情况：https://github.com/Fischer-L/previewbox。

Answer 5

另一种方法是使用网站缩略图/链接预览服务LinkPeek（甚至恰好显示StackOverflow的截图，现在作为演示），URL2PNG，Browshot，{{ 3}}，或Websnapr。

Answer 6

添加带有链接预览的弹出窗口的最简单、最快捷的方法是集成 Linkz.ai 脚本。

在 https://linkz.ai 处注册 API 密钥
将以下代码段添加到您的网页中：

<script src="https://js.linkz.ai/?key=XXXXXXXXXXXX"></script>

这也是所有答案中性能最高的解决方案：

不使用I帧
不使用重网站截图
延迟加载脚本和内容预览
跨浏览器支持
更好的设计＆UX

Answer 7

您可以执行以下操作：

创建（或查找）将URL呈现为预览图像的服务
将鼠标悬停在鼠标上并显示
如果你对生活过于痴迷，那么使用一个Timer插件让jQuery在一段时间后重新加载图像

当然这实际上并不存在。

更明智的是，您可以为某些网址生成预览图片，例如每天或每周使用它们。我想您不想手动执行此操作，并且您不希望向您的服务用户显示与网站当前外观完全不同的预览。

Answer 8

HTML 结构

<div id="app">
<div class="box">
    <div class="title">How to preview link with iframe and javascript?</div>
    <div class="note"><small>Note: Click to every link on content below to preview</small></div>
    <div id="content">
        We'll first attach all the events to all the links for which we want to <a href="https://htmlcssdownload.com/">preview</a> with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
    </div>
    <h3>Preview the link</h3>
    <div id="result"></div>
</div>

我们将首先使用 addEventListener 方法将所有事件附加到我们想要预览的所有链接。在此方法中，我们将创建元素，包括包含预览窗格的浮动框架、预览窗格关闭按钮、加载预览内容的 iframe 按钮。

<script type="text/javascript">
(()=>{
    let content = document.getElementById('content');
    let links = content.getElementsByTagName('a');
    for (let index = 0; index < links.length; index++) {
        const element = links[index];
        element.addEventListener('click',(e)=>{
            e.preventDefault();
            openDemoLink(e.target.href);
        })
    }

    function openDemoLink(link){

        let div = document.createElement('div');
        div.classList.add('preview_frame');
        
        let frame = document.createElement('iframe');
        frame.src = link;
        
        let close = document.createElement('a');
        close.classList.add('close-btn');
        close.innerHTML = "Click here to close the example";
        close.addEventListener('click', function(e){
            div.remove();
        })
        
        div.appendChild(frame);
        div.appendChild(close);
        
        document.getElementById('result').appendChild(div);
    }
})()

在How to live preview link

查看详细信息

如何在链接上鼠标悬停的链接页面的小弹出窗口中显示实时预览？

8 个答案: