如何使用 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中文网其他相关文章！