I've been working on a project using the hashbang (#!) method to skip though pages. Basically there is only 1 page, and when you click to go to a diffrent page, you stay on the page, but the URL changes, e.g. from index.html#home to index.html#about and new content is loaded via AJAX/JSON. All works well, but if I go "back" (or forward) in the browser, only the page in the URL changes, but my jQuery isn't fired to reload the content.
What I need is some code that will handle both the back and forward actions in all browsers, so that I can fire the function to load the page from jQuery. How do I do this?
Why reinvent the wheel? History.js is a great & well-maintained jQuery plugin that supports the new HTML5 History API and falls back gracefully to using hash URLs instead when the History API isn't supported. Works in just about every browser (even IE 6).
Take a look at the hashchange event. It fires when the hash is changed. However, you should only do this for Internet Explorer 8 support.
Internet Explorer 7 does not support hashchange, so you can't rely on that. As for Internet Explorer 9, it (along with Chrome, Safari and Firefox, of course) supports the History API, which you should be using instead. It keeps your URLs clear, short and semantic, while enabling elegant Back/Forward button support.
There is a jQuery-Plugin that seems to be doing exactly what you want.
http://www.asual.com/jquery/address/
It was the highest voted answer for the questing What is the best back button jQuery plugin?
Related
I have page that is doing the routing on clientside, using history API & push/popstate. Which works just fine on all the modern browsers. (search engines will be supported by node.js prerenderer)
However, I recently bumped into issue where IE doesn't fire popstate on hashchange while, while pushstate with urls works just fine, including IE11.
For example, like so...
$(document).on('click', 'a', function(e) {
e.preventDefault();
History.pushState({}, '', $(this).attr('href'));
});
...which correctly fires...
$(window).on('popstate', function() {
console.log('url changed');
});
According the W3C spec, the hashchange should fire popstate as it's changing the current history. However, when I add in hash links (<a href="#hashchange">...), clicking that on IE, nothing fires. :/
I wouldn't want to do IE detecting (as nowadays there are so many browsers which might fall in to the same pit of doom), rather than using feature detection. However, as history (popstate/pushstate) works just fine the rest of the way I can't even detect the issue on missing push/popstate...
if(!window.history || !window.history.pushState) { ...
... and use the hashchange instead. :/
Any thoughts?
PS. As a bonus, using jquery.history.js (jquery wrapped version of history.js) with hashtag url blows the whole thing up.
http://localhost/routetest/index.html#/page1/1234
becomes
http://localhost/page1/1234
... ??? :/
This is a known issue in IE11 and all Internet Explorer browsers before Edge.
See this link https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/. The Microsoft response is the last post in this issue report, and notes the newest version that is working.
All versions of IE will display this behavior, and hacking/monkey-patching the correct behavior back into the event framework is probably the only way to make it work reliably. This means you will likely need IE specific logic if you want to implement it yourself.
Try using a polyfill for History API for better support https://github.com/browserstate/history.js
In IE 10 and 11 the popstate event will only be fired for a history item after the state has been set with history.pushState or replaceState, including when it is set to null, and only when traversing between two items that have had state set. Therefore, it is necessary to set the state for a new history item in the hashchange event. Once the state is set, the popstate event will fire when the user navigates through the browser history.
https://developer.mozilla.org/en-US/docs/Web/API/History
I've tried to implement a menu bar which doesn't reload the page but modify the url in the browser and also display the data using ajax.
Somehow using HTML5 history api i've achieved this:
http://tinywall.info/demos/html5-history-api/menu1.php
When i checked this in IE9, it is reloading the page. As i googled, it was specified IE9- doesn't support html5 history api. But when i tried Google Plus in IE9, the navigation menu is getting the ajax content as well as changing the url. Is there any other concept to achieve this??..
Google Plus is probably using location.hash and onhashchange instead of changing the full URL.
HTML5 objects , attributes are not yet draft yet, it is scheduled to get its final version till 2024 and first draft at the end of 2012 .
Browser compatibility is the common issue in HTML5 you can add the attributes to the page by using the js, but object behavior depend on the browser itself so you have to wait for the newer version of ie (compatible one J). As per now there is no workaround
I'm trying to find the best approach not to break the back button in my javascript application.
In my research I'm trying to see what the state of the art is. So I turned to google maps to see how it works.
It does have back/forward functionality, but it doesn't change the url when generating a new history entry. Try to go to http://maps.google.com/, type NY and press enter. Now use the back button. No url change.
How do they do this? I tried to figure it out but I have a hard time wading through outdated documentation about javascript history and IE6 tips.
Create a new history entry:
location.hash = 'new_history_entry';
Creating no history entry:
location.replace('http://no/new/history/entry');
Google maps is using frames. To verify it, run HttpFox. You'll get a HTML page with javascript in it.
You can analyse it on your own, or just believe me that it works with frames.
Lekensteyn's answer will not add the back/forward buttons in IE6, you need a frame for that. jQuery History uses the onhashchange event if the browser supports it (all modern browsers do) if not it will add the appropriate backwards support needed (ie6 needs iframes, firefox 1, ie7 etc just need interval checks).
Something like YUI Browser History Manager will do it
Is there a way to add hotkeys (such as the media buttons) for the webbrowser?
This would need to cause a javascript event.
I except a firefox extension is required and i am ok if the solution requires greasemonkey as well (i seen growl use them both for javascript interaction. But thats javascript->pc not the other way around)
-edit- is this not possible ATM?
Firefox supports something called an AppCommand event. On Windows and Linux, only 7 commands are supported: Back, Forward, Reload, Stop, Search, Bookmarks and Home.
To implement extra commands, supported would have to be added to widget/src/windows/nsWindow.cpp and widget/src/gtk2/nsWindow.cpp to generate those additional types of AppCommand event. These events could then be intercepted by an extension to perform custom actions.
On Android, a different set of events are supported: Clear, VolumeUp, VolumeDown, Menu, Search. I don't know whether these events are used by Fennec.
For completeness, OS/2 builds of Firefox support Back, Forward, Reload and Stop.
How do I create a link to set the user's home page to my URL?
As some people have already answered, it used to be possible in internet explorer (prior to IE 7 I believe, could be wrong though) using something similar to
document.setHomePage('www.example.com');
I don't think any browser supports it anymore though. However, I would definitely try to convince you to do otherwise. Most people won't like having their settings automatically changed, even if it's triggered by a mouse click or other action. It's also quite likely that overzealous 'protection' programs will jump all over it and stamp it as a malicious attack.
As far as I know it's just possible in Internet Explorer
Make my Page your
<a href="javascript:history.go(0)" onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.test.de');">Startpage</a>.
I assume you mean put a link in your page to make it the browser homepage? In IE you can do something like:
this.setHomePage('http://www.mysite.com');
I don't think that works in Firefox though.