我正在尝试做类似的事情：
<a href="http://www.google.com">Google</a>
当用户悬停链接时：
<div id="display-site">
//working site contained in a div
</div>
注意我知道我可以使用 html 在新窗口中打开链接，我想我有兴趣弄清楚如何在 div 容器中“预览”包含在 <a> 标记中的网站， （如果链接悬停）。
【问题讨论】：
标签： javascript jquery html css iframe
1- 找到一个在元素悬停时显示工具提示的 jquery 插件。
2- 在工具提示容器中的 div 中插入链接所引用的网站的 iframe。
【讨论】：
这可以通过在 DOM 中创建一个 <iframe> 并将鼠标悬停在 <a> 上并将 href 作为 iframe 的 src= 属性加载来完成。为了使它看起来像一个弹出窗口，您需要将<iframe> 定位在绝对位置，并将其z-index CSS 属性设置为比页面内容的其余部分更高的值。
但是，如果您需要修改加载帧的显示，例如调整某些元素的大小以适应 @David 的回答所建议的缩放级别，您可能会违反同源策略，因为脚本会不允许访问同域外加载帧的属性。
试图访问框架内容的脚本受同源策略的约束，如果从不同域加载，则无法访问其他窗口对象中的大部分属性。这也适用于试图访问其父窗口的框架内的脚本。仍然可以通过window.postMessage实现跨域通信。
【讨论】：
_top中打开自己的网站。
类似的东西，只是一个想法
$('a').hover(function()
{
$('#display-site').load((this).attr('href'));
$('#display-site').show();
});
您需要根据需要设置 css 属性
【讨论】：
在继续之前 - 检查这是否有利于用户体验。当我将鼠标移到页面上并刷过超链接时，我并不总是希望链接预览出现在顶部。但是，假设这符合您用户的最大利益...
在实施方面，正如@Michael 建议的那样，这可以通过使用<iframe> 来完成，但是 iframe 中的文档将以用户设置的缩放级别显示，但会显示一个 250x250 的文档窗口，专为至少 1024x768 不会帮助用户。因此，您需要向用户显示网页的缩小鸟瞰图。
有一些方法可以获取当前视口缩放级别 (How to detect page zoom level in all modern browsers?)，但我不知道如何设置它（在大多数情况下，这可能是不可能的）。此外，我认为您不能在每个 iframe 的基础上设置缩放（假设您可以全部设置）。
那么最好的方法是向用户显示按比例缩小的位图页面渲染 - 就像 Google 在其搜索结果中对热门页面所做的那样。但是，这意味着对于您链接到的每个页面，您都需要获取目标页面的渲染图像。
我记得几年前有公司提供页面缩略图服务（这是 2005-2008 年左右流行的网页中那些烦人的双下划线广告文字的一部分），但现在已经很少见了。
我猜你必须设置自己的服务并托管布局引擎（Gecko、WebKit 或 Trident），以便它可以为你生成页面缩略图。
综合考虑，我认为不值得。
【讨论】：