如何使用 Iframe 和 JavaScript 在彈出視窗中建立即時頁面預覽？

如何在連結頁面的彈出視窗中實現即時預覽

在這種情況下，您需要顯示連結頁面的即時預覽當當滑鼠懸停在連結上時，會在緊湊的彈出視窗中顯示頁面。為此，我們可以利用 iframe 動態載入並顯示連結頁面的預覽。

實現此目的的一種方法是使用 JavaScript 和 CSS。實作方法如下：

1.標記：

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

工作原理:

當光標懸停在連結上時，JavaScript 會偵測到該事件並動態更新連結的src 屬性iframe 到連結的目標URL。隨後，iframe 載入連結頁面的預覽並將其顯示在彈出框中。

以上是如何使用 Iframe 和 JavaScript 在彈出視窗中建立即時頁面預覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！