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 중국어 웹사이트의 기타 관련 기사를 참조하세요!