JavaScript를 사용하여 교차 도메인 iFrame 내부의 클릭을 어떻게 감지할 수 있습니까?-JS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-11-30 03:16:14

원래의

153명이 탐색했습니다.

How Can I Detect Clicks Inside a Cross-Domain iFrame Using JavaScript?

JavaScript를 사용하여 교차 도메인 iFrame 내 클릭 캡처

보안 제한으로 인해 교차 도메인 iFrame 내에서 사용자 상호 작용을 감지하는 것이 어려울 수 있습니다. 그러나 창의적인 접근 방식을 사용하면 iframe 내에서 클릭이 발생했는지 추적할 수 있습니다.

해결책:

iframe에서 클릭 이벤트를 캡처하려면 다음을 고려하세요. 다음 접근 방식:

1. 보이지 않는 Div 만들기:

iframe 바로 위에 보이지 않는 div를 배치합니다. 이 div는 iframe 내의 모든 클릭을 캡처합니다.

2. 창 흐림 이벤트 활용:

사용자가 iframe 내부를 클릭하면 상위 창이 포커스를 잃게 됩니다. 창 블러 이벤트를 수신하여 클릭을 감지할 수 있습니다.

3. 활성 요소 확인:

흐림 이벤트 핸들러 내에서 활성 요소가 IFRAME인지 확인하세요. 그렇다면 iframe 내에서 클릭이 발생한 것입니다.

4. 이벤트 알림:

와 같은 지정된 요소를 업데이트하여 iframe에서 클릭이 발생했음을 나타냅니다.

코드 조각:

다음 예에서는 이를 구현하는 방법을 보여줍니다. 솔루션:

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

// Focus main document to detect iframe clicks
window.focus();

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

로그인 후 복사

참고:

이 솔루션은 모든 브라우저와 호환되지 않을 수 있으며 타이밍 및 포커스 처리에 문제가 있을 수 있습니다. 특정 애플리케이션에 맞게 코드를 테스트하고 사용자 정의하는 것이 좋습니다.

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