Javascript 鼠标悬停在链接上时，如何在链接页面的小弹出窗口中显示实时预览？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2117046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show live preview in a small popup of linked page on mouse over on link?
提问by Jitendra Vyas
How to show live preview in a small popup of linked page on mouse over on link ?
如何将鼠标悬停在链接上时在链接页面的小弹出窗口中显示实时预览？
like this
像这样
http://cssglobe.com/lab/tooltip/03/
http://cssglobe.com/lab/tooltip/03/
but live preview
但实时预览
回答by Anderson Green
You can use an iframe to display a preview of the page on mouseover:
您可以使用 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.Here's an example with multiple live previews:
这是一个包含多个实时预览的示例：
.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.回答by Shan Eapen Koshy
You can display a live preview of a link using javascript using the code below.
您可以使用以下代码使用 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>Learn more about it at Codegena
在Codegena 上了解更多信息
id="p1" - Fetch image preview on page load.
id="p2" - Fetch preview on hover.
id="p3" - Fetch preview image each time you hover.
回答by user3347064
Personally I would avoid iframes and go with an embed tag to create the view in the mouseover box.
就我个人而言，我会避免使用 iframe 并使用嵌入标签在鼠标悬停框中创建视图。
<embed src="http://www.btf-internet.com" width="600" height="400" />
回答by Dan Dascalescu
回答by Fischer
I have done a little plugin to show a iframe window to preview a link. Still in beta version. Maybe it fits your case: https://github.com/Fischer-L/previewbox.
我做了一个小插件来显示一个 iframe 窗口来预览链接。还在测试版。也许它适合您的情况：https: //github.com/Fischer-L/previewbox。
回答by Aleksi Yrttiaho
You could do the following:
您可以执行以下操作：
- Create (or find) a service that renders URLs as preview images
- Load that image on mouse over and show it
- If you are obsessive about being live, then use a Timer plug-in for jQuery to reload the image after some time
- 创建（或查找）将 URL 呈现为预览图像的服务
- 在鼠标上加载该图像并显示它
- 如果你对直播很着迷，那么使用 jQuery 的 Timer 插件在一段时间后重新加载图像
Of course this isn't actually live.
当然，这实际上不是直播。
What would be more sensible is that you could generate preview images for certain URLs e.g. every day or every week and use them. I image that you don't want to do this manually and you don't want to show the users of your service a preview that looks completely different than what the site currently looks like.
更明智的做法是，您可以为某些 URL（例如每天或每周）生成预览图像并使用它们。我认为您不想手动执行此操作，也不想向您的服务用户显示与网站当前外观完全不同的预览。
