Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich Live-Seitenvorschauen in Popups mit Iframes und JavaScript?

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

Patricia Arquette
Freigeben: 2024-10-25 02:53:02
Original
231 Leute haben es durchsucht

How to Create Live Page Previews in Popups Using Iframes and 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>
Nach dem Login kopieren

2. CSS:

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

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

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage