從子頁面調用時對話框模式窗口未關閉

Question

我正在嘗試使用jQuery UI對話框作為彈出窗口，並且我想將另一個aspx頁面作為主體放置到Jquery UI對話框中。 在這里，我不想使用Jquery按鈕選項。 在子頁面上，我放置了應該關閉模態窗口並刷新父頁面的按鈕。 下面是我一直在嘗試實現的代碼，但是由於某種原因我收到了js錯誤消息。 我在這里想念什么嗎？

父頁面：aspx頁面

  <div>
     <div id="dialog" title="This is Pop up ">
            <div class="modal">
                <div class="modal-body">
                    <iframe style="width: 100%; height: 100%;"  src="childPage.aspx" runat="server" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <input type="button" value="open"  id="OpenDialog"/>
    </div>

jQuery代碼：父頁面

 $(function () {
        var dialog
        dialog = $("#dialog").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
        });
        $("#OpenDialog").button().on("click", function () {
            dialog.dialog("open");
        });
    });

子頁面：

 <input type="button" id="btnCloseChildPageRefreshParent" value="Close and Refresh Parent Page" />

子頁面Js代碼：

   $(function () {
        $('#btnCloseChildPageRefreshParent').on('click', function () {
            refreshParent();
            open(location, '_self').close();
        });

        function refreshParent() {
            window.opener.location.reload();
        }
    });

Answer 1

這是一個iframe因此您需要使用window.parent （ 請參見此處的MDN文檔 ）而不是window.opener 。 它不是一個新窗口，而是一個框架，因此沒有打開器。

請注意，框架的域和父域必須匹配，否則由於跨域安全性限制，調用將失敗。

下面的代碼示例將打印出window.opener的值以及對window.parent.location.reload的調用所生成的錯誤，以進行說明。

 function log (o) { var el = document.createElement('div'); el.innerHTML = o; document.body.appendChild(el); } document.getElementById('button').onclick = function () { //This line could be used if the domain of the frame and parent match //window.parent.location.reload(); log('window.opener is: ' + window.opener); try { window.parent.location.reload(); } catch (e) { log('Attempted to call window.parent.location.reload(): ' + e); } } 

 <button id="button">Reload Parent</button>