Iframe と JavaScript を使用してポップアップでライブページプレビューを作成する方法-CSSチュートリアル-php.cn

Iframe と JavaScript を使用してポップアップでライブページプレビューを作成する方法

Patricia Arquette

リリース： 2024-10-25 02:53:02

オリジナル

231 人が閲覧しました

How to Create Live Page Previews in Popups Using Iframes and JavaScript?

リンクされたページのポップアップでライブプレビューを実装する方法

このシナリオでは、リンクされたページのライブプレビューを表示する必要があります。マウスをリンクの上に置くと、コンパクトなポップアップでページが表示されます。これを実現するには、iframe を利用して、リンクされたページのプレビューを動的にロードして表示します。

これを実現する 1 つの方法は、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 中国語 Web サイトの他の関連記事を参照してください。