Перезагрузите iframe из другого окна (не дочернего) - javascript

Question

Я пытаюсь выяснить, как обновить iframe из всплывающего окна.

Я могу сделать это, когда всплывающее окно вызывается с главной страницы (ADDing records), но я не могу понять это всплывающее окно, которое вызывается из iframe (записи EDITing).

В дополнение к проживанию в iframe кнопка для вызова всплывающего окна EDIT представляет собой страницу данных Caspio и построена на основе javascript во время загрузки страницы. Все страницы находятся в одном домене.

Пожалуйста, учитывайте следующую ситуацию. (Я удалил классы, заголовки и другие ненужные элементы для простоты)

Главная страница:

<div id="vehicles"> 
    <div class="frmHeader"> 
     <h2>Vehicles</h2> 
     <a onclick="popupWindow('addVehicle.html')"></a><!-- ADD vehicle --> 
     <a onclick="ifrRefresh('ifrVehicle')"></a> 
    </div> 
    <iframe src="lic/vehicle.html" name="ifrVehicle" id="ifrVehicle"></iframe> 
</div> 

Iframe Содержимое HTML-файл:

<div id="ifrContentVehicle" class="ifrContent killHeader"> 
    <script src="/scripts/e1.js"></script> 
    <script>try{f_cbload("***","http:");}catch(v_e){;}</script> 
</div> 

Iframe Содержание после загрузки:

<div id="ifrContentVehicle" class="ifrContent killHeader"> 
    <form id="caspioform"> 
    <div> 
    <table name="cbTable"> 
    <tbody> 
    <tr> 
    <td> 
     <a onclick="popupWindow('editVehicle.html?VehicleID=*')"></a><!--EDITv--> 
    ... 

Добавить Автомобиль:

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

Это работает для обновления моего iframe с именем ifrVehicle. Однако я не могу заставить его работать с всплывающим окном «Редактировать».

Любая помощь будет принята с благодарностью!

Answer 1

Я нашел возможное решение здесь, что работает для меня ->https://stackoverflow.com/a/7244062/4381332.

Имя главного окна:

window.open('url','windowName'); 

Обратитесь к нему по имени, когда popupWindow закрывается.

window.onunload = refreshWindowByName; 
function refreshWindowByName() { 
    window.open('javascript:window.iframeName.location.reload()','windowName'); 
} 

Answer 2

Один простой вариант - использовать событие фокуса окна и логическую переменную, чтобы отслеживать, было ли всплывающее окно открыто.
Очевидно, это будет только обновлять iframe после того, как всплывающее окно будет закрыто.
Смотрите следующий пример: Jsfiddle

HTML:

<button id="open" type="button">Click to open pop-up</button> 

Js:

var frameOpened = false; 
$(window).on('focus', function() { 
    if (frameOpened === true) { 
     frameOpened = false; 
     $('body').append('<p>Refresh iframe now</p>'); 
    } 
}); 
$('#open').on('click', function() { 
    var popup = window.open("", "popupWindow", "width=600, height=400"); 
    $(popup.document.body).html("Close the window when ready."); 
    frameOpened = true; 
}); 

---

Альтернативный подход, который не опирается на события фокус заключается в использовании LocalStorage.
Это позволит вам активировать обновление в фоновом режиме, не закрывая всплывающее окно. Очевидно, что это нарушит браузеры без localstorage.
Смотрите следующий пример: Jsfiddle

HTML:

<button id="open" type="button">Click to open pop-up</button> 

Js:

if (Storage !== void 0) { 
    Storage.refreshIframe = void 0; 
    var checkForRefresh = function() { 
     if (Storage.refreshIframe === true) { 
      Storage.refreshIframe = void 0; 
      $('body').append('<p>Refresh iframe now</p>'); 
     } 
    }; 
    $(window).on('focus', function() { 
     checkForRefresh(); 
    }); 
    setInterval(function() { 
     checkForRefresh(); 
    }, 1000); 
    $('#open').on('click', function() { 
     var popup = window.open("", "popupWindow", "width=600, height=400"); 
     var $p = $(popup.document.body); 
     $p.append('<button id="refresh" type="button">Refresh iframe</button>'); 
     $p.find('#refresh').on('click', function() { 
      Storage.refreshIframe = true; 
     }); 
    }); 
}