특정 페이지 iframe 브라우저 url
본문
어떠한 이유로 특정 페이지에 iframe으로 특정 부분을 불러와서 보여주고 있습니다.
이미 만들어진 파일을 나중에 필요에 의해 가져와서 사용하는 거라 신규 페이지를 새롭게 또 만들거나,
기존 페이지를 수정하기 힘든 부분도 있어서 iframe으로 가져왔습니다.
상단 비교 등 여러가지 이유로 iframe의 부모의 url을 가져와서 각 페이지를 구분을 하였는데요.
부모의 url은 $_SERVER['HTTP_REFERER'] 로 가져왔었습니다.
그런데 이번에 또 한번에 수정으로 이전.다음과 같은 버튼을 신규로 추가 한 후 $_SERVER['HTTP_REFERER'] 는 현재로 부터 이전 페이지의 url을 가져오는 것이기 때문에 제가 원하는 모양을 충족 시키지 못하더군요..
결국 ?파라미터로 해결은 하긴 했지만.. 문득 궁금해 졌습니다.
iframe 내에서 iframe url이 아닌 현재 브라우저의 url를 가져올 순 없는지 말입니다.
아직 배우고 있는 단계라.. 모르는 것이 많네요. 혹시 가능한 방법이 있을까요??
예제 설명)
브라우저 주소 창의 url은 www.aaa.php
www.aaa.php 특정 부분에 iframe www.bbb.php를 가져와서 보여줌 이전/다음 버튼 추가로 인해
다음 버튼등을 클릭시 iframe 내의 부모 url은 $_SERVER['HTTP_REFERER'] 시 www.bbb.php?로 출력함..
답변 2
보통 자신의 url 은 자바스크립트에서 location.href 로 호출합니다.
그래서 아래처럼 버튼처리하면 현재창 링크와 같은 이벤트가 일어납니다.
<button type="button" style="cursor:pointer" onclick="location.href='https://sir.kr/'">그누보드</button>
부모창을 호출할 때는 parent.location.href 로, 조부모창은 parent.parent.location.href 로,
최상위창은 top.location.href 로 호출합니다.
여기서 주의할 점은 본인이 아이프레임으로 블리워지지 않고 본인 자체가 최상위일 때는
location.href 와 parent.location.href 와 top.location.href 가 동일합니다.
그래서 본인이 최상위일때와 아이프레임으로 불리워졌을 때를 분기할 경우는
아래처럼 로직을 구성해야 합니다.
<script>
if (location.href == parent.location.href) {
본인이 최상위일 때의 코드;
}
else {
본인이 자식창일 때의 코드
}
</script>
IE 저버전이나 파폭 저버전의 경우는 저런 로직을 쓰면 삑사리가 납니다.
이프문에서 주소부분을 문자열로 처리해야 오류를 잡습니다.
if (String(location.href) == String(parent.location.href))
자식창에서 부모창의 변수 xxx 를 부를 때는 parent.xxx 로 부르면 되구요.
단지 본인이 최상위창일 때에 parent.xxx 는 존재하지 않으니 위의 조건문을 같이 써줘야 합니다.
부모창의 아이디나 클래스도 위와 같은 방식으로 호출할 수 있습니다.
----------
부모창에서 자식창의 변수나 아이디나 클래스를 부르는 것은 약간 더 복잡합니다.
그건 질문의 내용과는 다르니 생략할게요...
도메인이 다를 경우 window.postMessage 로 메시지를 주거니받거니 할 수 있을 겁니다.
chatgpt에게 물어보니까 소스까지 친절하게 출력해 주네요 :)
메시지를 보내는 쪽 :
// 다른 윈도우, 프레임 또는 아이프레임의 참조를 가져옵니다.
const targetWindow = document.getElementById('target-iframe').contentWindow;
// 메시지를 전달합니다. 두 번째 매개 변수로 대상 윈도우의 출처(origin)을 지정해야 합니다.
const message = 'Hello, other window!';
const targetOrigin = 'https://example.com';
targetWindow.postMessage(message, targetOrigin);메시지를 받는 쪽 :
// 'message' 이벤트 리스너를 추가합니다.
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
// 보낸 쪽의 출처(origin)을 확인합니다. 신뢰할 수 있는 출처인지 확인해야 합니다.
const senderOrigin = 'https://sender-example.com';
if (event.origin !== senderOrigin) {
// 출처가 신뢰할 수 없는 경우, 이벤트를 무시합니다.
return;
}
// 메시지를 처리합니다.
const message = event.data;
console.log('Received message:', message);
}