I have a service which loads third party content to my page using iframe. I have no access to modify the page i'm loading within the iframe.
I have to refresh the page which hosts the iframe in case the page within iframe gets refreshed. I do not want to refresh the parent page in case there's a redirect inside the iframe. Which essentially boils down to me having to differentiate between page redirect and page refresh inside the iframe element.
My initial thought was to use the onload event, but due to CORS issues, i'm unable to actually determine the source of the page it opened (so I cannot track whether it reloaded or redirected).
Is there a way to distinguish between page redirect and page refresh within the iframe?
the difference between reload and refresh. is that reload is (computing) to refresh a copy of a program in memory or of a web page on the screen while a refresh is (computing) the update of a display (in a web browser or similar software) to show the latest version of the data.
Related
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?
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...
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).
I am opening an url in iframe. That page has form to fill by user. When user fill the form, I want to reload the main website (outside the iframe) to be reload. Or if I can trigger a outside javascript function with in iframe.
I am working with ReactJs.
Ex. I have 2 Websites A and B. I am opening a specific url of site B in A using iframe. When user submit the form in ifram. I want to reload the web page of site A using javascript. When I try window.location.reload(), window.parent.location.reload(). they all reload iframe.
Have you tried using
window.location.assign(url);
and just adding the url of the original page? window.location.reload() is just refreshing the page, so if you open a new page refreshing it is still going to keep you on that page.
My tool can display external websites in an iFrame.
Few sites (e.g. "http://ec.asm.org/") are loading in my iFrame but after few seconds reloads on the same browser's tab but not as iFrame.
I suspects that it happens because the destination websites changing their location (redirection) to the same url during the page load (onLoad).
Is there way to verify this assumption (redirection to the same page)?
Is there any other possible reason for this problem (iFrame closed)?
I am designing an application in ASP.NET which has a Master Page and a iframe. When I click on a link within the Master Page, the link is opened in the iframe, but if I refresh the parent page the iframe loses it's source and returns a blank frame.
How can I retain the iframe src attribute after refreshing the page like Parallel's Plesk Panel?
There are a couple of ways to temporary store the URL of the iframe and then retrieve it on the next page reload.
Store it as a cookie
Use localStorage
Use window.name -- er, no. Ha. Just kidding. That is a bad hack.
Use one of the small packages that manage localStorage and default back to cookies if it must.
You might want to read HTML5 Local Storage fallback solutions for more info on those options.
I have loaded a page into div using jQuery. But when i refresh the webpage will go to initial stage?
How can i load the same page after refresh?
let the inital stage is
$("div").load("a.htm")
after clicking on a button it will load
$("div").load("b.htm")
now the division contains b.htm and after refreshing it is loading a.htm
I need to avoid this
if the div contains b.htm
after refreshing it should load the b.htm
how can i achive this????
Everytime you load a page into a div, you should alter the URL in the location bar to something like: http://example.com/#b.html. This will not navigate away from the current page, but when they reload (or open the saved bookmark), you can check the URL and use the part after # to indentify the page.
One possible way to achieve this is to use cookies. Once you load b.htm with AJAX set a client cookie and when you refresh the page check for the presence of this cookie and load the appropriate page.
You'll need to keep a note of which page is currently loaded, store it somewhere (local browser storage, or perhaps server-side), and on reloading your page checking against it and re-loading the div's content.