I'm creating a homepage. The content of the page is only get by HTTP-Request. So that the Client never change the page-url. How can I catch the back() function from the Browser to go one step back in my HTTP-Request. The automaticly creating of History of all loaded HTTP-Request is done, maybe I must catch this back() function.
Thanks for Help
You might want to update the hash (www.mysite.com/#hash) and then use a mechanism to detect hash change.
Try using this: Browser Back Button Detection
As far as I'm aware you cannot interfere with the back button etc. as it affects the browsers UX.
The best way would probably be to catch the browsers 'onunload' event which is triggered when the page is left. You could write a custom handler function on the assumption that they are clicking back.
If you want to get the page the user come from, you can use the document.referrer (more info on getting last page URL from history object - cross browser?).
Then you could use this to create a link if needed.
Regards,
Max
Related
Is there any way to do something like this: $(window).on("hashchange", doSomething); but detect document.location.search change?
This was already asked in On - window.location.hash - change?. In a nutshell, there is no perfectly clean way to do this in JavaScript; you would need to be checking the location every now and then. Some frameworks and libraries will give you a nice abstraction layer over this but internally, they just keep polling the location.
Unfortunately, Lucas' answer is incorrect - you can use the JavaScript History API to modify the current URL without reloading the page.
The hash and the search tag are having different implementation. When the search string got changes the whole page got reloaded but not in the case of hash. So if you want to do some processing on href change then you can use the onbeforeunload event handler.
You can use the beforeunload event to trigger your code to run prior to navigation... If you need something more specific (e.g., only navigations initiated in your code), then I recommend that you factor out code changing window.location into a separate function, and add a hook for your custom logic.
For better understanding you may want to look at Ben Nadel's post in regard to doing this, it may be exactly what you're looking for.
Differently from what happens with hash, if your search value changes due to a user's action, your page will get reloaded. Therefore, your option would be to use the onbeforeunload event:
<body onbeforeunload="return myFunction()">
http://www.w3schools.com/tags/ev_onbeforeunload.asp
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'm currently struggling with a good navigation on a website using Ajax calls and unobstrusive JS. I'm catching the click event on links, load the content, attach it to a div and then return false. This works quite well and also allows Google to crawl the site with speaky URLs.
But I didn't know how to deal with the browser back button. I found this solution to catch the event when the user clicks on the back button:
http://www.bajb.net/2010/02/browser-back-button-detection/
It works quite well. But I also want the back button to work normally when the user found the website via a link and wants to return to the previous page (I don't want to trap anyone).
When I thought about it the best way would be to use anchors. The normal back button supports them and you can go back in history without reloading the page (/#1 <- /#2 <- /#3 etc.)
It would work like this:
Use normal URLs in the link, but catch the click event
When user clicks, load content and attach it to a DIV
Change the window.location, using an anchor (e.g. 'domain.com/#products/women-clothing' with window.location="#products/women-clothing";)
When the window.location changes, get the anchor, read out the path and get the content via ajax, attach it to a DIV
Only the last part isn't really clear for me and I could need help here.
Finaly, my question: Does this make any sense?
Thanks!
Just add the href to window.location.hash after loading the content into a div. Then you can use that back button detection script to load what ever is in the hash.
I solved the problem by using this great jQuery Plugin: History.js
Thanks!
My webpage runs a javascript function when the page is loaded. However, I don't want the function to run if the user comes back to this page using the back button. How can I prevent this using javascript?
$(document).ready(function(){
// Do not run this function if the user has arrived here using the back button
RefreshThePage();
});
I'd have thought that using cookies is the easiest way to do this
I think studying the way Struts handles duplicate form submissions could help you.
Some links:
http://www.techfaq360.com/tutorial/multiclick.jsp
http://www.java-samples.com/showtutorial.php?tutorialid=582
http://www.xinotes.org/notes/note/369/
Track when user hits back button on the browser
There are multiple ways of doing it, though some will only work in certain browsers. One that I know off the top of my head is to embed a tiny near-invisible iframe on the page. When the user hits the back button the iframe is navigated back which you can detect and then update your page. Here is another solution.
You might also want to go view source on something like gmail and see how they do it.
Here's a library for the sort of thing you're looking for by the way
The event object offers you to get the key code. so basically you register an eventlistener onKeyDown. Use the received event. if the keycode matches the key you like continue with your function.
document getElementById('elementId').onKeyDown = checkKey();
function checkKey(event) {
if (event.keyCode === keyCode) then . . .
}
play around with alert(event.keyCode); to find the right one.
When the browser clicks "back" button, I want to append "&page=3" to the URL.
How do I bind it, and then do this?
Edit: I want this very simple.
BIND the event{
window.location(that-url + "&page=3")
}
Can it be done that simply?
It sounds like you're trying to create a history plugin.
Have you tried using using the mikage history plugin?
I wouldn't recommend changing the URL when they navigate away from the current page (which is what the back button does), because you immediately erase the forward history (thus breaking the forward button). When trying to handle the back button with pagination and javascript/ajax it is more typical to use the browser hash to pass parameters. The JavaScript namespace doesn't get cleared when the forward and backward buttons are used and the hash is updated according to what navigation was used. These history plugins have a couple of methods to detect when navigation is used (as the doc load event doesn't fire).
So beware, writing a history plugin isn't straightforward because of the way browsers fail to consistently handle hash property of the location object (part of the window object). You will definitely want to look at what others have done.
We use the window.location.hash to handle the history in our app.
I guess it works well in single page apps and is very simple.
For multiple pages app, I don't think it's a good idea to try to control and change the natural page history of the browser.
When the user clicks "back" or "next", the hash key gets the previous or next value.
Because of IE7 you need to use a polling technique (but it is ok in all browsers), with a setInterval(...) and a fast function that checks for instance every 300ms if the hash has changed.
Then, if a change occurs, act accordingly.
ie: call the server and refresh some areas in the page.
It works very well, and does not kill at all the responsiveness of the application.