opener 부모창에 대한 접근이 안됩니다...ㅜㅜ
본문
인덱스에서 최신글등을 모달창으로 띄우고 있습니다.
최신글을 누르면 모달창이 열리고,
모달창 에서 글쓰기등을 하면
form 타겟을 target="myiframe" 이렇게 주어 처리페이지에서는 새로고침을 하려고합니다
<iframe name="myiframe" src="" style="display:none;"></iframe>
처리완료페이지에서 top 으로 하면 모달창까지 다닫히면서 새로고침이 됩니다.
echo "<body onLoad='top.document.location.reload();'>";
그래서 top 부분을 opener로 바꾸면 새로고침자체가 안되고 그대로 멈춰있구요...
opener가 안되는것같은데 뭐가 잘못된걸까요..ㅜㅜ
답변 3
모달창과 iframe의 DOM 구조 문제로 인해 발생하는 증상입니다.
opener 객체는 window.open()을 열었을 때만 부모 창을 참조할 수 있습니다.
그러나 모달은 기존 페이지 내에서 생성되므로 opener를 사용할 수 없습니다.
따라서, iframe 내에서 부모 문서를 새로고침하려면 parent 또는 top 객체를 사용해야 합니다.
하지만, 현재 모달창 내부의 iframe에서 부모 문서를 새로고침하려는 경우,
top.location.reload();론 전체 페이지가 새로고침되면서 모달도 닫히는 문제가 발생합니다.
parent.location.reload();로 모달을 유지하면서 부모 문서만 새로고침할 수 있습니다.
1. index.php 예시 코드
<button id="openModal">최신글 보기</button>
<div id="myModal" style="display:none;">
<form action="write_update.php" method="post" target="myiframe">
<input type="text" name="content">
<button type="submit">작성</button>
</form>
</div>
<!-- iframe (서버 응답을 처리할 용도) -->
<iframe name="myiframe" style="display:none;"></iframe>
<script>
// 모달 열기 버튼 클릭 시 상태 저장
document.getElementById('openModal').addEventListener('click', function() {
document.getElementById('myModal').style.display = 'block';
sessionStorage.setItem("modalOpen", "yes"); // 모달이 열려 있음을 저장
});
// 부모 페이지가 새로고침될 때 모달 상태 유지
window.onload = function() {
if (sessionStorage.getItem("modalOpen") === "yes") {
document.getElementById('myModal').style.display = 'block';
}
};
// 모달 닫기 (ESC 키로 닫기)
document.addEventListener('keydown', function(event) {
if (event.key === "Escape") {
document.getElementById('myModal').style.display = 'none';
sessionStorage.removeItem("modalOpen"); // 모달 상태 초기화
}
});
</script>
2. 처리 완료 후 index.php만 새로고침 (write_update.php에서 실행)
<?php
echo "<script>parent.location.reload();</script>";
echo "<script>parent.location.reload();</script>";
이거 하줄로 되었네요;;; 너무너무 감사합니다~~~
(●'◡'●) 감사합니다.
.
자바스크립트에서 세션스토리지 변수를 하나 만들어서
가령 yes 일때는 모달열기 no 일때는 모달닫기
이렇거 한후 부모창 리로드시 세션변수에 yes 가 들어가도록 하면 될 것입니다.
