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).
Related
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.
I am creating a “pseudo loading screen” which will display a full page div over the homepage once the page is opened and will disappear after a few seconds.
What I need to figure out is how to prevent this loading screen from showing after a user has clicked to another page on the site and then back to the home page (either using the back button or an anchor link back home).
Essentially I need the loader to only be shown the first time the user visits the website during the session, and only ever again during subsequent sessions.
(It would also be ideal if the loading screen was hidden when the home page is refreshed and if the loading screen appeared if the user begins their session on a page other than the homepage)
My best guess is that this will be achieved using localStorage but I’m new to JS so any suggestions on how to get this working would be great!
For your purpose, you can utilize the sessionStorage property of the window object. After showing the loading screen you can save this info in sessionStorage. For example:
sessionStorage.setItem('shown', true);
And when the page is rendered you can check if the loading screen has been shown:
if (!sessionStorage.getItem('shown')) showScreen();
A page session lasts as long as the browser is open, and survives over page reloads and restores. You can read more
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.
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
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.