Reload iframe from different window (not child) - javascript

Question

I am trying to figure out how to refresh an iframe from a popup window.

I can do it when the popup is called from the main page (ADDing records), but I can't figure it out for a popup that is called from within the iframe (EDITing records).

In addition to residing within an iframe the button to call the EDIT popup is a Caspio Data Page and is built from javascript during page load. All pages reside on the same domain.

Please consider the following scenario. (I removed classes, titles, and other irrelevant items for simplicity)

Main Page:

<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 Content html file:

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

Iframe Content after load:

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

Add Vehicle:

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

This works to refresh my iframe named ifrVehicle. However, I cannot get it to work with the Edit popup.

Any help will be greatly appreciated!

Answer 1

I found a possible solution here that works for me -> https://stackoverflow.com/a/7244062/4381332.

Name the main window:

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

Refer to it by name when the popupWindow closes.

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

Answer 2

One simple option would be to use the window focus event and a boolean variable to keep track of whether the pop-up has been opened.
Obviously, this will only refresh the iframe once the popup is closed.
See the following example: 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;
});

---

An alternative approach that doesn't rely on the focus event is to use localstorage.
This will allow you to trigger the refresh in the background, without closing the popup. Obviously, this will break on browsers with no localstorage.
See the following example: 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;
        });
    });
}