Bagaimana untuk Membuat Pratonton Halaman Langsung dalam Pop Timbul Menggunakan Iframes dan JavaScript?

Cara Melaksanakan Pratonton Langsung dalam Pop Timbul untuk Halaman Terpaut

Dalam senario ini, anda mempunyai keperluan untuk memaparkan pratonton langsung bagi yang dipautkan halaman dalam pop timbul padat apabila tetikus melayang di atas pautan. Untuk mencapai matlamat ini, kami boleh menggunakan iframe untuk memuatkan dan memaparkan pratonton halaman terpaut secara dinamik.

Salah satu cara untuk mencapainya ialah dengan menggunakan JavaScript dan CSS. Begini cara anda boleh melaksanakannya:

1. Penandaan:

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

Cara ia Berfungsi:

Apabila kursor menuding pada pautan, JavaScript mengesan acara dan mengemas kini atribut src secara dinamik bagi iframe ke URL sasaran pautan. Selepas itu, iframe memuatkan pratonton halaman yang dipautkan dan memaparkannya dalam kotak pop timbul.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pratonton Halaman Langsung dalam Pop Timbul Menggunakan Iframes dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!