This question already has answers here:
Changing the URL without reloading the page
(7 answers)
Closed 8 years ago.
i see sometimes on some sites like facebook or the Play Store from google, that by clicking a link the url changes (NOT with #blah), but the wohle site doesn't reload. I can use back/forward, so it could't be javascript, i think.
Can anybody say me how to implement that on a site? thanks
It uses pushState, and it is done using javascript and HTML5 with pushState compatible browsers. Here is some documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A quote from those docs:
Suppose http://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display
http://mozilla.org/bar.html, but won't cause the browser to load
bar.html or even check that bar.html exists.
The url can be changed in this way, and the new page is rendered using javascript. I do this by using Backbone.js, but there are other tools to do the same thing. It is mostly the same technique as those URLs with # in them, except they get rid of the hash. Backbone.js will use a # by default, but can be configured to make the URL to appear normal.
Here is a SO question about how to do this using Backbone
Another way this can be achieved is with AngularJS. As was said in the above comments, this will use AJAX to get new data to display, and then use javascript to change the content of the page, all without loading a new URL.
For browsers whose not support htmll5 like ie8, you can use the library https://github.com/browserstate/history.js/ which emulate the html5 pushstate method.
Related
This question already has answers here:
angularjs 1.6.0 (latest now) routes not working
(5 answers)
Closed 6 years ago.
Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #.
For example, www.webiste.com/#/login becomes www.website.com/#!/login
I have to enable the html5Mode and also disable the requireBase which removes the base as a whole using the code,
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
and the URL changes to www.website.com/login which works fine but is misleading and is not what Angular SPA URLs look like.
If I do not enable the html5Mode, the URL is encoded and I cannot get around it. So www.website.com/#/login becomes www.website.com/#!/#%2Flogin (Notice the later / is encoded as %2F).
Is this a change implemented by the developers for some specific purpose? What difference does it make? What changes do I need to make to my app to keep it working? Am I doing something wrong?
Github issue: https://github.com/angular/angular.js/issues/15547
It's called the hash bang.
For a while Twitter was using the same thing. It allows for AJAX calls and let search engines know your path without using a "real" path. It's considered obsolete though.
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
There is another stackoverflow answer about that:
Doing links like Twitter, Hash-Bang #! URL's
Update:
One of the reasons for not having a need for the hash bang anymore is that we can push the history state without a page reload. Something so called "one page" websites, like React, do.
This question already has answers here:
How to show Ajax requests in URL?
(7 answers)
Closed 9 years ago.
I'm relatively new to web development so this probably is a odd question. I want part of my site to load a new page. But significant part doen't need to change. What I do now is that I load content into a div.
$('#rightdiv').load("about.html");
The downside to this is that the address doesn't change, I believe there is a good solution but I don't know how. I have tried googleing it but I can't find anything good on it. So I would love to see both a solution and how the sollution is called (hope you know what I mean).
Thank you for your time and effort.
Browsers supporting HTML5's pushState will let you change the path:
$('#rightdiv').load("about.html", function pushState(){
if(history && history.pushState){
history.pushState('','','about.html');
}
});
The standard way is to use location.hash. So for example if you were on mysite.com/, and loaded the about.html page, you could set the hash to #about. This would not cause the page to reload, but would alter the URL (to provide for bookmark/back button support).
As an example, using the success callback to load():
$('#rightdiv').load('about.html', function() {
location.hash = 'about';
});
HTML5 adds a new API called pushState. This allows for more complete modification of the URL without causing a page reload. Read more about that here.
This can easily be achieved by taking advantage of HTML5 and its features. Myspace does something similar to what you are asking. The HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info
That's the right way to load data into a div using AJAX. I personally prefer to use the jQuery.ajax() function though.
I have a web page which is completely rendered on the server side (nodejs+phantomjs), I want to send this page to a client browser. The problem is the client browser tries to re-execute the javascript. Hence, I have two options:
Disable javascript in the iframe that loads that page in the client
Strip every javascript and js call/event from the page
Although I will not use the original javascript of the page, I will later on need to be able to add javascript events to the iframe.
It seems the first option can be realised by using the iframe 'sandbox' argument.. but that will prevent me from injecting other javascript later on. Hence I need a way to realize the second option, i.e. removing all the original javascript from the page.
Is there an efficient (and reliable) way to do so? I guess using regex could be a solution, but is it reliable?
I found a solution which appear to be working. I am not sure it is the best solution, but it is surely better than manually removing any JS reference from the document.. for my purposes.
Here's the trick: hijack js! I am just prepending in the <head> the following:
<script>
Function.prototype.call = function(){};
Function.prototype.apply = function(){};
Function.prototype.bind = function(){};
</script>"
and JavaScript is disabled.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to keep the browser history in sync when using Ajax?
I think this is a rather easy fix but I can't find an answer anywhere else...so here goes...I made this kind of template for my homepage...I know the code's not insanely elegant but my main problem is that what if I want to send someone to a specific part of my page...rather than just my "home"...take a look http://useless-r-us.t15.org/
I mean how can I reference each of "blag", "projects", and "about me" using some unique url but still have my pretty css3 transitions...I'm thinking something like this...
http://radokirov.com
P.S....I know blag is a typo --> http://xkcd.com/148/
You should use url hashes (the part of the url following the # sign).
Then, in javascript, in the ready (jquery) event handler, based on the url's hash, you should do the appropriate ajax request and populate the page with the appropriate content.
For more details: Modify Address Bar URL in AJAX App to Match Current State
I use 'window.location.hash' to add '#something' to the URL without refreshing the page.
I want to know how to do the same but using a slash (/) instead of hash (#).
Why? I have navigation tabs and I use a jQuery and Ajax to dynamically load the data. When javascript is enabled, '#something' is added to the end of the URL to get the data. When javascript is disabled, it redirects to '/something'. So I want to fake the same URL for both.
Instead of http://site.com/section#something -> http://site.com/section/something
Thanks.
You can use any combination after the hash you want, but the answer to your question is no, you can't do what you're asking without re-directing the user.
Being able to play with the URL without re-directing would be a security concern on some levels (can you change the domain too? why not?....see where this rabbit hole goes?). For example changing your URL via JavaScript to say: http://www.mybank.com (why isn't my bank using SSL? bad bank, bad!) would be a phishers dream...so browsers don't allow messing with the URL like this at all...not without actually taking you there.
Take a look at this article. Basically, it lets you do this:
history.pushState({}, 'New Title', 'new_page.html');
This updates the history and the location bar but not actually load the page. That's what you want, but it's part of HTML5, and few (if any) browsers support it at the moment. Sticking with hashes is a better idea.
History.pushState (see the link in #Casey's post, or Kyle Scholz' blog) is present in the latest versions of Safari and Firefox, and Modernizr 1.5 now tests browser support for it. I just starting playing around with this today and it appears to do exactly what you want.
I realize this doesn't help with older browsers; some kind of window.location.hash trick will still be needed there.
Why don't you deploy SWFAddress?
It does get you URLs in the form of ../#/section/something and should be pretty much what you need. It's widely used for many Flash/AJAX websites on SEO considerations.