Jump to content

Reload Iframe From Different Window (Not Child) - Javascript

Recommended Posts

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">
<a onclick="popupWindow('addVehicle.html')"></a><!-- ADD vehicle -->
<a onclick="ifrRefresh('ifrVehicle')"></a>
<iframe src="lic/vehicle.html" name="ifrVehicle" id="ifrVehicle"></iframe>

Iframe Content html file:

<div id="ifrContentVehicle" class="ifrContent killHeader">
<script src="/scripts/e1.js"></script>

Iframe Content after load:

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

Add Vehicle:

window.onunload = refreshParent;
function refreshParent() {

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!


Link to comment
Share on other sites

  • 8 years later...

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


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:

 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 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";

 }else{ frames[i].style.display = "none";}}}
 <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>
 <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>

The change is by adding this code:



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...