iframe이나 동적으로 생성한 div 내부에서 마우스 좌표값을 얻는 방법

 

 

 

1. 일반적인 문서에서 마우스 좌표값 얻기

일반적인 웹페이지에서 마우스의 X, Y 좌표를 가져오는 기본적인 방법입니다.

$(document).mousemove(function (event) {
    console.log("X: " + event.pageX + ", Y: " + event.pageY);
});

 

설명

• event.pageX, event.pageY → 브라우저 전체 페이지에서의 마우스 위치
• event.clientX, event.clientY → 현재 뷰포트(보이는 화면) 기준의 마우스 위치

---

2. 특정 요소(가상의 문서) 내에서 마우스 좌표값 얻기

예를 들어, 가상의 문서 역할을 하는 div.container 내부에서 마우스 위치를 가져오는 방법입니다.

$(".container").mousemove(function (event) {
    var offset = $(this).offset(); // 요소의 위치 가져오기
    var x = event.pageX - offset.left; // 요소 내부 X 좌표
    var y = event.pageY - offset.top;  // 요소 내부 Y 좌표
    console.log("Container 내부 좌표 - X: " + x + ", Y: " + y);
});

 

설명

• $(this).offset() → 해당 요소의 화면 위치를 가져옴
• event.pageX - offset.left → 요소 내부에서의 X 좌표
• event.pageY - offset.top → 요소 내부에서의 Y 좌표

---

3. iframe 내부의 마우스 좌표값 얻기 (동일 도메인)

만약 가상의 문서가 아이프레임이라면, 아래와 같이 처리할 수 있습니다.

$("#myIframe").on("load", function () {
    var iframe = $(this)[0].contentWindow.document;

    $(iframe).mousemove(function (event) {
        console.log("Iframe 내부 좌표 - X: " + event.pageX + ", Y: " + event.pageY);
    });
});

---

4. 다른 도메인의 iframe에서 마우스 좌표값 받기 (PostMessage)

다른 도메인의 iframe에서 마우스 좌표값을 받으려면 postMessage를 사용해야 합니다.

 

① 아이프레임 내부 (이벤트 감지 및 부모로 전송)

window.addEventListener("mousemove", function (event) {
    parent.postMessage({
        type: "mousemove",
        x: event.pageX,
        y: event.pageY
    }, "*"); // 보안상 특정 도메인 지정 권장
});

 

② 부모 페이지 (이벤트 수신)

window.addEventListener("message", function (event) {
    if (event.data.type === "mousemove") {
        console.log("아이프레임 내부 좌표 - X: " + event.data.x + ", Y: " + event.data.y);
    }
});

 

보안 팁
postMessage("*") 대신 특정 도메인을 지정하는 것이 더 안전합니다.
예: parent.postMessage(data, "https://example.com");

 

 

 

 

 

 

 

 

 

 

#jquery #마우스좌표값