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

Question

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

喜欢这个

http://cssglobe.com/lab/tooltip/03/

但实时预览

Answer 1

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

Answer 2

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

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

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

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

这是一个包含多个实时预览的示例：

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

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

Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>
  <div class="box">
     <iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
     </iframe>
  </div> 
and <a href="https://www.jquery.com/">JQuery</a>
  <div class="box">
     <iframe src="https://www.jquery.com/" width = "500px" height = "500px">
     </iframe>
  </div> 
will appear when these links are moused over.

Answer 3

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

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

通过Codegena了解更多信息

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

Answer 4

我个人会避免使用 iframe 并使用嵌入标签在鼠标悬停框中创建视图。

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

Answer 5

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

Answer 6

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

Answer 7

您可以执行以下操作：

1. 创建（或查找）将 URL 呈现为预览图像的服务
2. 在鼠标悬停时加载该图像并显示它
3. 如果你对直播很着迷，那么使用 jQuery 的 Timer 插件在一段时间后重新加载图像

当然，这实际上不是现场直播。

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