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

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).

Answer 2

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...