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
Related
I'm creating an HTML and Javascript client for running in browser which talks to REST API. I'm using RouteMap to set my URLs. So I've kept a convention something like this
http://mysite.com/#/{ResourceName}/[edit|view|list]/[Id]/
I've set just one route and I'm grabbing these parameters in the function bounded to hashchange. Most of the things work fine. Just two issues and I'm stuck because of them.
If the user clicks on the same link twice, hashchange event doesn't fire. Yes, hash has not changed so obviously it won't fire. But there should be something which can be done and I'm missing that.
If I change something in the UI (like bring up new divs and hide some) for which I don't want to change the hash link, I loose that history and can't go back by clicking the back button properly.
Any help will be grateful.
For #1, you probably want to attach a handler to the link click event. That way you can tell if the link is being clicked. When I use onhashchange, I always attach something to the click event to assist polyfills for onhashchange, so at least I can tell when it's failing.
For #2, I want to point out that having automatic stuff change the user's history is problematic. You could fill someone's history with minute, meaningless hash changes. I recommend only changing the history when the user actually interacts. Short of that, HTML5 does offer pushState and popState. Reference
How do change the url shown with the jQuery? With pagination, I do an ajax call to get the next page, but I want to update the url for bookmarking purposes. How do I do that?
You'd do it with either the HTML5 History API or hash tags.
You should consider using the address plugin: http://www.asual.com/jquery/address/
Supports deep linking and updates the address for you with a simple function call.
How far do you want to go? Do you want to change index.html to about.html or do you want to change it to index.html#about.html and have JavaScript change the page?
If you want to do the first you will need to use the HTML5 history API. Be aware that it only works in some browsers. I would recommend reading Dive Into HTML5's History API tutorial to understand all the details of how it works, but if you want to jump right into it, you can try the History.js jQuery plugin.
If you need support for older browsers, consider the hashchange event and the HashChange jQuery plugin. Every time you change pages, you can set location.hash to the page you want to map.
In both cases, you need to be aware that you're adding pages to the history and will need to monitor the events provided by the plugins. Otherwise, when the user clicks back, the URL will change but the page won't.
I'm trying to monitor my URL hash (a.k.a. fragment) using the onhashchange event so that I can make appropriate ajax calls based upon the parameters I'm storing in the hash. Unfortunately, there is something unexpected changing my hash. In all of my code, there is only one place that where I use window.location.hash and it is simply checking the value of the hash, not changing it. I know that the back and forward buttons can change the hash, but I'm not touching them. How do I find where the hash change is coming from?
Update
Ok... figured it out. And yes, I'm a dummy, but I leave my findings here for those as dumb as I. I was looking for something programmatic changing my hash, but what was really happening was that I was clicking on an anchor with href="#". There is an event handler hooked to these, and I set the return value to false and that prevented it from changing the URL.
Links that target internal anchors change the hash. For example:
Contact Us
Clicking that would change the hash to #contact.
Also, if you're using any third-party javascript libraries, it's possible that some code in there might be changing it.
What does the hash change to? From what? And When? If you can identify the exact circumstances that trigger the change, that should give you some idea what might be changing it.
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
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.