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
Related
In my small chat application I need to refresh the page once every time the page is loaded. This stops messages from being sent twice.
I have tried using sessionStorage to store whether the page has been refreshed, but this did not work because it was reset every time the page was loaded.
How can I check if the page has already been refreshed?
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).
To reload/refresh a page from another page using JavaScript. (A page, which is already opened in the browser. I need to refresh it (not open again) from another page.)
I refer a lot, but i can't get the exact answer i want.
How to refresh another page using javascript without opening the same page in a new tab
I referred this page. But it has a parent and child page. But i need to refresh a unrelated page from another page.
Is this possible?
If so, give me some suggestion.
Explanation of my actual project:
There is a pageA from that using Ajax i called some other page(inside a div of pageA). Then by clicking a link in that div (present in page called from Ajax), it will open a pageB in new tab in the same browser. in that page, when user clicks a button, It will call another page, in that page i do a table update. After that update, pageA should be refreshed. This is the actual project what i have to do.
Assuming this is in the same browser and the same domain a simple way is as follows (pseudo code)
Page A -> controller
Page B -> page to be refreshed.
The steps are:-
Page A Calls a Javascript function (via button press for example) that writes a value of 'update: true' to local storage.
Page B has a loop of 500ms that checks this value in local storage - when it sees 'update: true' it sets it back to false and then refreshes itself.
These are all simple things to look-up how to do but if you get stuck just let me know.
Oh and same principle applies on different browsers (i.e. if Page A opened in chrome, Page B opened in Firefox) - just that instead of local storage you use a server and store the state to DB / a file.
Below is a quick example - open the two pages in different tabs then click 'refresh' in the controller apge - you will notice the 'page to be refreshed' page refreshes.
CONTROLLER
PAGE TO BE REFRESHED
first of find frames(or div) which you want to reload
for example
enter code here
var myframe=parent.frames['frameName'];
then
myframe.location.href=myframe.location.href;
i hope it will work well.
in my case it work fine.
thakns &BR
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.