외부 홈페이지에서 클릭 좌표를 가져올 수 있는가?
외부 홈페이지에서 클릭한 좌표의 값을 얻어 그 데이터의 값을 가져오는 방법을 테스트하게 되었다.
결론은 불가능하다.
왜?
브라우저의 동일 출처 정책(Same-Origin Policy) 때문에 일반적으로 불가능하다. 브라우저는 한 웹사이트가 다른 웹사이트의 DOM에 직접 접근하는 것을 허용하지 않기 때문이다.
하지만, 만약 외부 홈페이지가 소유하고 있는 페이지이면, 해당 페이지에 클릭 좌표를 표시하고 가져오는 코드를 추가하는 것이 가능하다. 또한, 서버와 클라이언트 간에 통신하여 좌표 정보를 주고받는 방식으로 구현하는 것도 가능하다.
클릭한 위치의 페이지 좌표
<!DOCTYPE html>
<html>
<head>
<title>Click Position Example</title>
</head>
<body>
<div id="clickAble" style="width: 300px; height: 300px; background-color: lightblue;">
클릭!
</div>
<script>
document.getElementById('clickAble').addEventListener('click', function(event) {
// 페이지 좌표
var pageX = event.pageX;
var pageY = event.pageY;
// 요소 내 상대 좌표
var relativeX = event.offsetX;
var relativeY = event.offsetY;
console.log('Page X:', pageX, 'Y:', pageY);
console.log('Relative X:', relativeX, 'Y:', relativeY);
});
</script>
</body>
</html>
오늘은 무슨 오류를 만날까?! 널 만나러 가는 길~ LOL