如何在連結頁面的彈出視窗中實現即時預覽
在這種情況下，您需要顯示連結頁面的即時預覽當當滑鼠懸停在連結上時，會在緊湊的彈出視窗中顯示頁面。為此，我們可以利用 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中文網其他相關文章！
