Script to Reload Page Once When Loaded

[kpcollier]

I am using iframes for a navigation bar from the HowTo article posted Here. The pages inside this tabbed navigation share the same authentication. I have login re directions with their own authentications as well.

When I am redirected to the page with the iframes, I still need to log in to the other datapages on the tabs. From there, I can either log in again or refresh the entire page myself (or, really, I can just refresh the iframe I am in and that works too). I know iFrames are tricky and I really don't want to mess with them. I would rather have my employees have to endure another 1 1/2 seconds to have it working right. 

Could someone help me with a script that reloads the page ONCE when the page is fully loaded? I have been able to get it to refresh, but it keeps refreshing. I am working with onclick query string values so I am not too sure if appending the URL once loaded would work either.

[kpcollier]

Actually - it would work best if I could figure out how to refresh just the frames. I think this might be able to be done with sessionStorage? Not quite sure how I would target the individual frames, though. The ideal workflow would be a script that refreshes the iframe once the tab (link to iframe) is clicked. This would also help with data being refreshed to the pages. 

[Harbinger]

Hi KPC,

If you can post your JS code here, that would be helpful for us to understand your case.

 

Cheers,

~ H

[kpcollier]

Hey @Harbinger, I should have replied to my post. I was messing around with different ways and got something that works for me. Way more simple than I was originally thinking. Used it for each id. I'm sure there's a "cleaner" way, but this worked.

var iframe = document.getElementById("frameId"); iframe.src = iframe.src

[Meekeee]

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();