JavaScript를 사용하여 교차 도메인 Iframe 내부의 클릭을 어떻게 감지할 수 있습니까?

JavaScript를 사용하여 iframe 내 클릭 감지

사용자가 iframe 내에서 클릭했는지 확인하는 방법을 찾고 있다면 교차 도메인 iframe을 JavaScript에서 직접 모니터링할 수 없다는 제한 사항을 우연히 발견했을 수도 있습니다. 그럼에도 불구하고, 목표 달성에 도움이 될 수 있는 영리한 기술이 있습니다.

해결책은 iframe 위에 보이지 않는 div를 오버레이하는 것입니다. iframe 내에서 클릭이 발생하면 오버레이 div에 대한 클릭 이벤트도 트리거됩니다. 이 이벤트를 수신하면 iframe 내의 클릭을 간접적으로 감지할 수 있습니다.

다음은 이 접근 방식을 설명하는 코드 예제입니다.

const message = document.getElementById("message");

// Ensure the main document has focus to register the blur event.
window.focus();

window.addEventListener("blur", () => {
  setTimeout(() => {
    if (document.activeElement.tagName === "IFRAME") {
      message.textContent = "clicked " + Date.now();
      console.log("clicked");
    }
  });
}, { once: true });

<div>

이 예제에서 메시지 div는 iframe 내에서 클릭이 발생할 때 타임스탬프와 함께 '클릭됨'을 표시하는 데 사용됩니다. 이 접근 방식은 Chrome, Firefox 및 IE 11(및 다른 브라우저에서도 가능)에서 효과적으로 작동합니다. 이는 특히 사용된 iframe 태그를 제어할 수 없는 경우 교차 도메인 iframe 내에서 사용자 상호 작용을 모니터링하는 간단한 솔루션을 제공합니다.

위 내용은 JavaScript를 사용하여 교차 도메인 Iframe 내부의 클릭을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!