Javascript 在url悬停时，是否在弹出div中显示网站？

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

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

当用户悬停链接时：

<div id="display-site">

//working site contained in a div

</div>

//包含在div中的工作场所

---

注：我知道我可以在一个新窗口中使用html打开链接，但我想知道如何在div容器中“预览”包含在

标记中的网站（如果链接悬停）。

这可以通过在DOM中创建

来完成

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

---

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

在实现方面，正如@Michael所建议的，这可以通过使用

来实现，但是iframe中的文档将以用户设置的缩放级别显示，但是显示为至少1024x768设计的文档的250x250窗口对用户没有帮助。因此，您需要向用户显示网页的缩小鸟眼表示

有很多方法可以获得当前视口的缩放级别（），但我不知道如何设置它（很可能在大多数情况下是不可能的）。此外，我不认为您可以在每个iframe的基础上设置缩放（假设您可以全部设置）

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

我记得几年前，有一些公司提供网页缩略图服务（这是2005-2008年间流行的令人讨厌的网页双下划线广告文本的一部分），但现在已经很少见了

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

---

从各方面考虑，我认为这不值得。

像这样的，只是一个想法

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

---

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

1-找到一个在元素悬停时显示工具提示的jquery插件。

---

2-在工具提示容器中的div中插入链接引用的网站的Iframe。

同源策略与此有何关系？在iframe中打开一个网站总是可能的，不是吗？我会更害怕那些不喜欢在框架中打开并在

\u top

@Rudie中打开自己的网站。我误读了MDN文档，然后我自己的一个测试失败了，但你是对的。jQuery无法加载外部链接。使用工具提示概念，在div内容中使用iframe。。。编辑：是的，Michael是正确的。如果您的服务器支持PHP，这可能很有用。