On hover of a url display the website in a popup div?

Question

I am trying to do something like:

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

When a user hovers the link:

<div id="display-site">

//working site contained in a div

</div>

Note I am aware that I can open the link in a new window using html, thought I am interested in figuring out how I would go about 'previewing' the website contained in the <a> tag, in a div container, (if the link is hovered).

Answer 1

This can be done by creating an <iframe> in the DOM on hovering over an <a> and loading the href as the iframe's src= attribute. In order to make it look like a popup, you would need to position the <iframe> at an absolute location, and set its z-index CSS property to a higher value than the rest of the page content.

However, if you need to make modifications to the display of the loaded frame, such as sizing some elements to accommodate the zoom level as suggested by @David's answer, you may run afoul of the same-origin policy, as scripts will not be permitted to access properties of the loaded frame outisde the same domain.

From MDN:

Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.