Reload Iframe From Different Window (Not Child) - Javascript

[LWSChad]

Hello All!

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.

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!

CHAD

[LWSChad]

Hello;

I found a solution.

 

1) I name the main page 

<a href="url" target="lic"> 

2) refer to it from the non-child popup onunload

<script>
    window.onunload = refreshLic;
    function refreshLic() {
        window.open('javascript:window.ifrVehicle.location.reload()','lic');
    }
</script>

[Kurumi]

Hi - Just wanted to share this specific code to refresh/reload the iFrame in your DataPage.

document.getElementById('some_frame_id').contentWindow.location.reload();

Reference: https://stackoverflow.com/questions/86428/what-s-the-best-way-to-reload-refresh-an-iframe

This can be applicable to this article: https://howto.caspio.com/tech-tips-and-articles/create-embeddable-tabbed-interface/

This article provides a script for Tabbed interfaces. As the script is using iFrames, every change of tab - the DataPage will remain as it is. If you are using a Report DataPage, it will not load the new data. As a workaround, you can edit the code that will reload the iFrame with every click of the tab.

Updated script:

<script>
 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 array.push(allHTMLTags[i]);
 }}
 return array;}
 
 function channel(n){
 var frames = getElementByClass("ChannelView");
 var length = frames.length;
 for(var i = 0; i < length; i++)
 { if(frames[i].id == ("viewer"+ n))
 { frames[i].style.display = "inline";
   frames[i].contentWindow.location.reload();

 }else{ frames[i].style.display = "none";}}}
 </script>
 
 <div style="display:block; text-align:left;">
 <div style="display:block;">
 <ul id="menu">
 
 <li><a onclick="channel(0)">Tab 0</a></li>
 <li><a onclick="channel(1)">Tab 1</a></li>
 <li><a onclick="channel(2)">Tab 2</a></li>
 
 </ul>
 </div>
 
 <div class="content">
 
 <iframe frameborder=0 id="viewer0" class="ChannelView" src="URL of Tab 0" style="display:inline"></iframe>
 <iframe frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
 <iframe frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>
 
 </div>
 </div>

The change is by adding this code:

frames[i].contentWindow.location.reload();