When I return to a previous page through history.back(), that page is not newly loaded. Instead, it is displayed as it was left. This is good as it is efficient and avoids dribbling in of images.
However, I want to run a function when the page is entered via history.back() to synchronise with the page that is calling history.back(). Is there an event firing in the called page when it is entered in this way [i.e. with history.back()]?
Note: I have a hack using setInterval that polls for re-entry, but think it is ugly. I tried popstate but it did not fire.
You can use
https://github.com/browserstate/history.js/
Especially
History.Adapter.bind(window,'statechange',function()
It fires on every state change ('back' as well).
Related
On a single page app, my problem is I'm subscribing to the hashchange event to render the content (create and destroy widgets that represent my pages), but the function only gets fired when the hash actually changes, such as when the browser back and forward buttons are clicked.
My main javascript file that always gets loaded on first time and also on refresh contain the following
topic.subscribe("/dojo/hashchange", function(newhash){
//set content based on hash
});
When refresh is clicked, it doesn't get fired and I'm left with a blank page (all my logic to render the page lies inside the anonymous function for that topic I subscribed to)
your subscribe isn't being called on a refresh as the hash didn't actually change. you're subscribing to hash changes, changes that happen after the page as loaded.
using this subscribe method things can get out of hand quickly. you may want to look at using route. some links -
https://developer.mozilla.org/en-US/docs/Web/Events/hashchange
https://dojotoolkit.org/documentation/tutorials/1.9/hash/
https://dojotoolkit.org/reference-guide/1.10/dojo/router.html
https://www.sitepen.com/blog/2014/06/18/dojo-faq-does-dojo-have-routing-like-backbone-and-embe/
The following doesn't work:
$(window.document.location).change(function (){
});
How do I know when to start sending data back to the server?
UPD: Yes, i want to detect when the user leaves or refresh current page.
Thanks! A window.onbeforeunload what I was looking for.
If #adrianp is right, you should use window.onbeforeunload.
There is no event for a location change (there is for hash change though, see "hashchange"), so you would have to use polling to keep track of the location by checking in intervals.
You could track clicks on anchors inside your page and prevent the default behaviour occuring (i.e. the browser loading the new page and possibly halt executing the remaining JavaScript in the event handler) so you can delay the page change and execute whatever logic your application requires before the document is unloaded (which would fire an unload event).
Which brings me to the question : what do you intend to do ?
I am using the HTML5 history API
I notice that if:
if I am on a page called /first
I use pushState to /second
And then hit the back button
The event handler for window.onpopstate() returns the state for /first, as documented.
In order to transition from /second to /first, I would like to see the URL that was popped - ie, /second in this case. What's the best way of doing that?
In lieu of a proper answer, I've implemented the following workaround:
Using a data-urlhack attribute on the <body> element when a page is loaded
In onpopstate() handler, checking the value of this attribute so I can transition from this page (where the back button was hit) to the page the back button has sent us to.
Also ensure that pages loaded in onpopstate() don't try and push use pushState() themselves.
My question is about using Back and Next buttons (of the browser) on an AJAX (dynamical) webpage.
The solution I self came up with:
setInterval(function(){
if (location.hash != hash)
{
hash = location.hash;
app.url = window.location.href.toString().replace('http://xxxxx.nl/xxxx/#!/','')
app.handleURL();
}
}, 500);
this function reads the url(hash) and compares it with the last stored url(hash), every 0.5 second. If url has changed (back/next is pushed) it runs handleUrl() which runs more functions to dynamically build my page.
the problem is, this sort of works BUT when I click an html [A] element or when I change the url in an other way (javascript), that content will be loaded TWICE because of the setInterval()... functionality.
How can I build my HTML/Javascript in such way that my content will always be loaded once,
once when I push back/next
once when I click on an HTML element/use Javascript functions on
runtime
I searched the sh*t out of google for a solution, plz help!
You don't need a timer to check it. Just use the onhashchange event, and fire your AJAX calls when the event is called. This event isn't supported in IE versions below 8, though, so your method seems fine if you need IE support.
Also, it doesn't make sense that they're being called twice for a elements, since there's no reason for the interval to call your AJAX loader twice just because the hash was changed using an a element. You probably have an event listener attached to the a element which causes it to load the AJAX content, which wouldn't be needed since you're detecting any change in the hash, no matter how it was changed.
I suggest using a library for that. It will be tricky to make your own solution. Take a look at these:
http://www.asual.com/jquery/address/docs/#sample-usage
http://benalman.com/projects/jquery-bbq-plugin/
I have a webpage that use $(document).ready() to build the interface. Then the user can go to a child page, and to go back to the original page he can press the browser's "previous" button or a "Return" button in the page which triggers a history.back();. Back on the original page, $(document).ready() is not triggered so the page is missing information.
Is there a way to trigger it automatically like if it was a "real load"?
edit
placing an alert in it, the alert is popped but stuff is missing in my interface like if some part of the ready event is missing. Investigating...
edit 2
hahahahaha in document.ready I click some checkbox which are supposed to be unchecked. When I "back" on this page, they are checked so they become unchecked because I reclick them.
Sorry, this is completely my bad :(
A quick solution to this problem, use "onpageshow" instead.
window.onpageshow = function(event) {
//do something
};
If the user uses the Back button to navigate and you require a full reload of the page, you can set the NO-CACHE policy of the page.
This way the browser is forced to reload the page from the server, even using the Back button.
1.) put scripts at the bottom of your page.
2.) execute plugins and whatnot in your last script tag(s).
3.) Do not use onDomReady implementations at all, it's redundant.
People are so accustomed to onload or ondomready, they overlook the fact that putting your scripts at the bottom of a page does virtually the same thing without the need to poll and see if your html is available.
Furthermore, it's also good practise as your scripts do not block html/css rendering either.
Not depending on onDomReady or onLoad implementations solves a lot of issues.
Very interesting question. You might need to re-trigger the event/function when the page gets focus, or something similar. you might also need to keep a flag variable to track whether an 'event re-triggering' is in order.