5

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

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

当用户悬停链接时：

<div id="display-site">

//working site contained in a div

</div>

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

4

4 回答 4

9

这可以通过<iframe>在 DOM 中将鼠标悬停在 an 上<a>并将其加载href为 iframe 的src=属性来完成。为了使它看起来像一个弹出窗口，您需要将其定位<iframe>在绝对位置，并将其z-indexCSS 属性设置为比页面内容的其余部分更高的值。

但是，如果您需要修改加载帧的显示，例如调整某些元素的大小以适应@David 的回答所建议的缩放级别，您可能会违反同源策略，因为不允许使用脚本访问加载帧的属性在同一个域之外。

来自 MDN：

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

于 2012-06-24T18:01:21.840 回答
3

在继续之前 - 检查这是否有利于用户体验。当我将鼠标移到页面上并刷过超链接时，我并不总是希望链接预览出现在顶部。但是，假设这符合您的用户的最大利益......

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

有多种方法可以获取当前视口缩放级别（如何在所有现代浏览器中检测页面缩放级别？），但我不知道设置它是如何工作的（在大多数情况下，这可能是不可能的）。此外，我认为您不能在每个 iframe 的基础上设置缩放（假设您可以全部设置）。

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

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

我想您必须随后设置自己的服务并托管布局引擎（Gecko、WebKit 或 Trident），以便它可以为您生成页面缩略图。

综合考虑，我觉得不值得。

于 2012-06-24T18:07:07.853 回答
0

像这样，只是一个想法

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

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

于 2012-06-24T18:10:11.407 回答
0

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

于 2012-06-24T22:51:00.837 回答