диалог модальное окно не закрывается при вызове с дочерней страницы

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 (see the MDN documentation here) вместо 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>