在悬停的网址显示弹出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上<a>并在加载hrefiframe的src=属性时在DOM中创建一个来完成.为了使其看起来像弹出窗口,您需要将其定位<iframe>在绝对位置,并将其z-indexCSS属性设置为比页面内容的其余部分更高的值.

但是,如果您需要修改已加载帧的显示,例如根据@ David的回答建议调整某些元素以适应缩放级别,则可能会违反同源策略,因为不允许使用脚本访问加载的帧的属性超出相同的域.

来自MDN:

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