Wie erstelle ich Live-Seitenvorschauen in Popups mit Iframes und JavaScript?

So implementieren Sie Live-Vorschauen in Popups für verlinkte Seiten

In diesem Szenario müssen Sie eine Live-Vorschau der verlinkten Seiten anzeigen Seite in einem kompakten Popup, wenn die Maus über den Link fährt. Um dies zu erreichen, können wir einen Iframe verwenden, um die Vorschau der verlinkten Seite dynamisch zu laden und anzuzeigen.

Eine Möglichkeit, dies zu erreichen, ist die Verwendung von JavaScript und CSS. So können Sie es umsetzen:

1. Markup:

<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>

So funktioniert es:

Wenn sich der Cursor über dem Link bewegt, erkennt JavaScript das Ereignis und aktualisiert dynamisch das src-Attribut des iframe zur Ziel-URL des Links. Anschließend lädt der Iframe die Vorschau der verlinkten Seite und zeigt sie in der Popup-Box an.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Live-Seitenvorschauen in Popups mit Iframes und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!