Comment créer des aperçus de page en direct dans des fenêtres contextuelles à l'aide d'Iframe et de JavaScript ?

Comment implémenter des aperçus en direct dans les fenêtres contextuelles pour les pages liées

Dans ce scénario, vous devez afficher un aperçu en direct du lien page dans une fenêtre contextuelle compacte lorsque la souris survole le lien. Pour y parvenir, nous pouvons utiliser une iframe pour charger et afficher dynamiquement l'aperçu de la page liée.

Une façon d'y parvenir consiste à utiliser JavaScript et CSS. Voici comment vous pouvez le mettre en œuvre :

1. Balisage :

<code class="html"><div class="box">
  <iframe src="" width="500px" height="500px"></iframe>
</div>
<a href="https://en.wikipedia.org/">Wikipedia</a></code>

2. CSS :

<code class="css">.box {
  display: none;
  width: 100%;
}

a:hover + .box, .box:hover {
  display: block;
  position: relative;
  z-index: 100;
}</code>

3. JavaScript :

<code class="js">// Get elements
const iframe = document.querySelector('iframe');
const links = document.querySelectorAll('a');

// Add event listeners
links.forEach(link => {
  link.addEventListener('mouseover', () => {
    iframe.src = link.href;
  });
});</code>

Comment ça marche :

Lorsque le curseur survole le lien, JavaScript détecte l'événement et met à jour dynamiquement l'attribut src du iframe vers l'URL cible du lien. Par la suite, l'iframe charge l'aperçu de la page liée et l'affiche dans la boîte contextuelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!