Refresh (not reload) iFrame

Question

I'm trying to figure out how to refresh the contents of an iFrame on a page. I did quite a bit of Googling and hunting around through old posts, but all of the solutions offered are for reloading an iFrame to the initial src URL, and not the active URL.

For example, I have an iFrame that contains my Freshdesk client portal embedded into my main website. If I click around to a couple of different pages within the iFrame, I then want to be able to intercept a page refresh and simply refresh the iFrame to the active page.

Current Behavior: Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to home

Desired Behavior: Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to new ticket screen (the last page visited in the iFrame before triggering the refresh)

The refresh doesn't have to be triggered by an f5 refresh, I can use an inline button on the page, but it needs to reload the iFrame to the same page that it was last on, not the original src URL. I tried the following code, but it refreshes to the home page of my Freshdesk every time:

document.getElementById('iframeid').src = document.getElementById('iframeid').src

and

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

So, how can I refresh my iFrame without restarting back to the original src URL?

Answer 1

You can use the onbeforeunload event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload to detect that the page is going to be closed or refreshed.

So you can then compare the active src and the original src of the iframe to know if the user navigated to some page inside the iframe.

Then choose your favourite message passing system to make sure the portal has a way to know that src after it loaded again: url parameter, local storage, cookie, something else...

• Thought Space Designs: My specific problem lies in getting the iFrame to refresh to the same page that it was on before the refresh. I can intercept the refresh just fine, but the iFrame keeps refreshing back to the main src page, and not to the last page it was on...
• Shilly: Since the iframe is embedded in the portal page, you need to make sure the portal page checks for this on load. For example, the easiest way to pass data is through the url. So when you detect that the portal page will refresh, block that and load www.myportal.com?ticket=123 or something instead. Then inside the portal page, you can just detect if the url the portal was opened with, contains a ticket number and update the iframe src if needed. Same with local storage, but instead of checking the url, check the storage if there was an active ticket.
• Thought Space Designs: The iFrame is on my own website. The portal page is what's inside the iFrame. They are on two separate URLs so CORS rules apply... Also, the portal's code and logic is not accessible to me as it's controlled by Freshdesk. I can only control the code on my own website.
• Shilly: Doesn't the same logic apply? Freshdesk has a url to directly open a specific ticket right? Your own website just needs to update the src of the iframe to that url so the portal opens upon the ticket instead of the home page. And you know which src it has to be by passing it between reloads.
• Thought Space Designs: That's the part I think I'm confused on... I'm not sure how to get the active URL of the iFrame in order to reload it and pass the data back in. I haven't been able to figure out any way to get the active URL of the iFrame...

Answer 2

With the help of Shilly and a bit of brainstorming, I figured out a solution to my problem, and am posting it here for anyone else in my situation. Turns out that Freshdesk (the website inside the iframe) allows you to use custom javascript. Using this functionality, I came up with the following:

1) use parent.postMessage on first page load to send the URL of the currently active page to my main website.

2) use sessionStorage to store the URL of the current Freshdesk page on my website

3) on first page load of my main website, check to see if a sessionStorage value is set, and if so, set the iFrame's src to this value.

It's not quite a true "only on refresh" solution, however it does make the last iFrame page visited persist throughout the remainder of the user's session, which means they won't lose their place if refreshing or navigating away temporarily. Thanks to the use of sessionStorage, this will also reset back when the user closes the page, meaning on their next visit they'll restart at the Freshdesk home page (or whatever other website you're hosting inside the iFrame).