교차 도메인 Iframe 내부의 클릭을 안정적으로 감지하려면 어떻게 해야 합니까?

Iframe 내에서 사용자 클릭을 감지하는 방법

도전 과제:

사용자가 iframe 내에서 클릭하는 것은 어려울 수 있습니다. 특히 iframe이 다른 도메인에서 시작된 경우에는 더욱 그렇습니다. (교차 도메인 iframe이라고도 함).

해결책:

iframe 내의 클릭을 감지하려면 iframe 바로 위에 있는 보이지 않는 div를 사용하여 영리한 해결 방법을 사용할 수 있습니다. iframe의 경계. 사용자가 iframe 내의 아무 곳이나 클릭하면 div가 클릭 이벤트를 가로채서 iframe으로 전달합니다.

구현:

기본 문서에서 다음을 생성합니다. 요소:

<div>

그런 다음 다음 JavaScript를 삽입하세요. 코드:

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

window.focus();

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

설명:

1. window.focus()는 기본 문서에 흐림 이벤트 리스너를 활성화하는 포커스가 있는지 확인합니다.
2. window.addEventListener("blur", ...)는 초점이 주 이벤트에서 멀어질 때 발생하는 흐림 이벤트를 캡처합니다. document.
3. blur 리스너 내에서 setTimeout을 사용하여 이벤트 처리를 약간 지연시켜 브라우저가 내부 상태를 업데이트했는지 확인합니다.
4. document.activeElement는 블러 내의 활성 요소가 있는지 확인합니다. 기본 문서는 IFRAME이며 클릭이 iframe 내에서 발생했음을 나타냅니다.
5. 확인되면 #message div의 textContent가 다음으로 업데이트됩니다. 현재 타임스탬프 및 console.log 메시지가 표시됩니다.

이 기술은 교차 도메인인 경우에도 사용자가 iframe 내에서 클릭했는지 여부를 추적하는 안정적인 방법을 제공합니다.

위 내용은 교차 도메인 Iframe 내부의 클릭을 안정적으로 감지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!