在悬停的网址显示弹出div中的网站？

Question

我正在尝试做类似的事情：

<a href="http://www.google.com">Google</a>

当用户悬停链接时：

<div id="display-site">

//working site contained in a div

</div>

注意我知道我可以在一个新窗口中使用html打开链接，我想我有兴趣弄清楚如何'预览'<a>标签中包含的网站，在div中容器，（如果链接悬停）。

Answer 1

这可以通过在<iframe>上悬停并在<a>加载iframe的href属性时在DOM中创建src=来完成。为了使其看起来像弹出窗口，您需要将<iframe>放在绝对位置，并将其z-index CSS属性设置为高于页面内容其余部分的值。

但是，如果您需要修改已加载帧的显示，例如调整一些元素以适应@ David的答案所建议的缩放级别，您可能会违反同源策略，因为脚本将不允许访问加载帧的属性超出同一域。

From MDN:

  

尝试访问框架内容的脚本受同源策略的约束，如果从其他域加载，则无法访问其他窗口对象中的大多数属性。这也适用于试图访问其父窗口的框架内的脚本。仍然可以使用window.postMessage实现跨域通信。

Answer 2

继续之前 - 请检查用户体验带来的好处。当我将鼠标移到页面上并刷过超链接时，我并不总是希望链接预览显示在顶部。但是，假设这符合用户的最佳利益......

实施明智，这可以通过@Michael建议使用<iframe>来完成，但是iframe中的文档将以用户的设置缩放级别显示，但显示设计文档的250x250窗口至少1024x768不会帮助用户。因此，您需要向用户显示网页的缩小的鸟瞰图。

有一些方法可以获得当前视口缩放级别（How to detect page zoom level in all modern browsers?），但我不知道如何设置它的工作原理（在所有可能性中，在大多数情况下这可能是不可能的）。此外，我不认为你可以在每个iframe的基础上设置缩放（假设你可以设置全部）。

然后，最好的方法是向用户显示缩小的位图页面呈现 - 就像Google在搜索结果中对热门网页所做的那样。但是，这意味着您链接到的每个页面都需要获取目标页面的渲染图像。

我记得几年前有些公司提供了页面缩略图服务（它是2005 - 2008年间流行的网页中那些令人讨厌的双重加下划线的广告文字的一部分），但现在它们很少见。

我想你必须设置自己的服务并以一种可以为你生成页面缩略图的方式托管布局引擎（Gecko，WebKit或Trident）。

考虑到所有因素，我认为这不值得。

Answer 3

像这样的东西，只是一个想法

$('a').hover(function()
 {
    $('#display-site').load((this).attr('href'));
    $('#display-site').show();
 });

您需要根据需要设置css属性

Answer 4

1-找到一个在元素悬停上显示工具提示的jquery插件 2-在工具提示容器中的div内插入链接引用的网站的Iframe。