development

팝업을 열고 닫을 때 상위 페이지 새로 고침

big-blog 2020. 9. 8. 21:36
반응형

팝업을 열고 닫을 때 상위 페이지 새로 고침


JavaScript에서 window.open으로 팝업 창을 열 었는데,이 팝업 창을 닫을 때 상위 페이지를 새로 고침하고 싶습니다. (onclose 이벤트?) 어떻게해야합니까?

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");

' window.opener '를 사용하여 부모 창에 액세스 할 수 있으므로 자식 창에 다음과 같이 작성합니다.

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>

팝업 창에는들을 수있는 닫기 이벤트가 없습니다.

반면에 창이 닫힐 때 true로 설정된 closed 속성이 있습니다.

닫힌 속성을 확인하도록 타이머를 설정하고 다음과 같이 할 수 있습니다.

var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000); 

작동하는 Fiddle 예제를 참조하십시오 !


자녀 페이지에 다음을 입력하십시오.

<script type="text/javascript">
    function refreshAndClose() {
        window.opener.location.reload(true);
        window.close();
    }
</script>

<body onbeforeunload="refreshAndClose();">

하지만 좋은 UI 디자인으로 button더 사용자 친화적이기 때문에 닫기를 사용해야합니다 . 아래 코드를 참조하십시오.

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            window.opener.location.reload(true);
            window.close();
        });
    });
</script>

<input type='button' id='btn' value='Close' />

나는 이것을 사용한다 :

<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}

</script>
<script type="text/javascript">
function refreshAndClose() {
    window.opener.location.reload(true);
    window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>

when the window closes it then refreshes the parent window.


window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.

This should work:

function windowClose() {
    window.location.reload();
}

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​

If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.


In my case I opened a pop up window on click on linkbutton in parent page. To refresh parent on closing child using

window.opener.location.reload();

in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong). So I decided not to reload page in parent and load the the page again assigning same url to it.

To avoid popup opening again after closing pop up window this might help,

window.onunload = function(){
    window.opener.location = window.opener.location;};

Try this

        self.opener.location.reload(); 

Open the parent of a current window and reload the location.


You can reach main page with parent command (parent is the window) after the step you can make everything...

    function funcx() {
        var result = confirm('bla bla bla.!');
        if(result)
            //parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
            parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
    } 

You can use the below code in the parent page.

<script>
    window.onunload = refreshParent;
    function refreshParent() {
      window.opener.location.reload();
    }
</script>

Following code will manage to refresh parent window post close :

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }

참고URL : https://stackoverflow.com/questions/10792408/open-popup-and-refresh-parent-page-on-close-popup

반응형