Survoler une URL afficher le site dans une popup pop?

Question

Je suis en train de faire quelque chose comme:

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

Lorsqu'un utilisateur passe le lien:

<div id="display-site"> 

//working site contained in a div 

</div> 

Remarque Je sais que je peux ouvrir le lien dans une nouvelle fenêtre en utilisant html, pensais-je Je suis intéressé à comprendre comment je vais faire 'prévisualiser' le site Web contenu dans la balise <a>, dans un conteneur div, (si le lien est plané).

Answer 1

Cela peut se faire en créant un dans les DOM en planant au-dessus d'un <a> et le chargement du href comme attribut src= de l'iframe. Pour que cela ressemble à une fenêtre contextuelle, vous devez positionner le à un emplacement absolu et définir sa propriété CSS z-index sur une valeur plus élevée que le reste du contenu de la page. Toutefois, si vous devez apporter des modifications à l'affichage du cadre chargé, par exemple en dimensionnant certains éléments pour s'adapter au niveau de zoom comme suggéré par la réponse de @ David, vous risquez d'aller à l'encontre de la même règle d'origine. ne sera pas autorisé à accéder aux propriétés du cadre chargé à l'extérieur du même domaine.

From MDN:

Scripts essayant d'accéder au contenu d'un cadre sont soumis à la politique d'origine, et ne peuvent pas accéder à la plupart des propriétés dans l'autre objet de la fenêtre si elle était chargée d'un domaine différent. Cela s'applique également à un script dans un cadre essayant d'accéder à sa fenêtre parente. La communication interdomaine peut encore être réalisée avec window.postMessage.

Answer 2

Avant de continuer - vérifiez que cela profite à l'utilisateur. Lorsque je déplace ma souris sur une page et que j'effleure un lien hypertexte, je ne souhaite pas toujours que l'aperçu du lien apparaisse en haut. Cependant, en supposant que cela soit dans le meilleur intérêt de vos utilisateurs ...

La mise en œuvre, cela peut être fait, comme le suggère @Michael, en utilisant un , cependant le document dans l'iframe sera affiché sur le poste de l'utilisateur niveau de zoom, mais montrant une fenêtre 250x250 d'un document conçu pour au moins 1024x768 ne va pas aider l'utilisateur. Ainsi, vous devez afficher une représentation en zoom arrière de la page Web vers l'utilisateur.

Il existe des moyens pour obtenir le niveau de zoom de la fenêtre courante (How to detect page zoom level in all modern browsers?) mais je ne sais pas comment cela fonctionne (dans tous les cas, c'est probablement impossible dans la plupart des cas). En outre, je ne pense pas que vous pouvez définir le zoom sur une base par-iframe (en supposant que vous pouvez tout définir). La meilleure solution consiste donc à afficher un rendu de page bitmap réduit pour l'utilisateur - comme Google fait pour les pages populaires dans ses résultats de recherche. Cependant, cela signifie que pour chaque page que vous liez, vous devez obtenir une image rendue de la page cible. Je me souviens qu'il y a quelques années, des entreprises fournissaient des services de vignettes de pages (cela faisait partie de ces textes d'annonce insupportables doublement soulignés dans les pages Web qui étaient populaires entre 2005 et 2008), mais ils sont rares aujourd'hui.

Je suppose que vous devrez ensuite configurer votre propre service et héberger un moteur de présentation (Gecko, WebKit ou Trident) de manière à pouvoir générer des miniatures de page pour vous.Tout compte fait, je ne pense pas que ça vaut le coup.

Answer 3

Quelque chose comme ça, juste une idée

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

Vous devrez définir la propriété css au besoin

Answer 4

1- Trouver un plugin jquery qui affiche les info-bulles sur le vol stationnaire de l'élément.
2- Insérez un Iframe du site Web auquel le lien fait référence à l'intérieur d'une div résidant dans le conteneur d'info-bulles.