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.
Related
We're using URL hashes in some places in our app to filter the display, e.g. #highlight=free will highlight our free content. We use javascript to process the hash, listen to hash changes. All works great.
We're wondering however about the best way to mix it with "real" HTML anchor links. i.e. links that point to a specific html id on the page, e.g. #chapter-5.
Should we implement jumping to the right place using javascript and stop relying on the default browser behaviour? for example, link to #chapter=chapter-5&highlight=free and handle both filter and anchor in javascript? Or is there a safe/standard way to "mix" anchors and custom hashes?
If your target environment allows it, then the "safe/standard way" would be to leave hashes with old-school hash (commonly seen as "hashbang") approach alone for regular in-page anchors and use modern HTML5 history API instead.
If you must support older browsers you can use some polyfill that resorts back to that hash.
The comments to the question were probably the most helpful so far, and so we chose to implement anchor jumping and deal with everything after the # in javascript, and not rely on built-in support in browsers for it.
For those interested, we use a combination of jquery.deparam, URI.js and some custom code to listen to hash changes and hook into our own functions. We also played with Hasher.js which looked nice, so we might use it in future.
I've been looking all over for this, and I think the problem is that I inherently suck at programming or scripting of any sort, and I don't know the right words to use...
Basically: I want to make a Chrome extension that reads the the innerText value from the ticketing system at the place I work with. As an example...
<span class="infomsg">Tickets Found [<span id="tickets_count">5</span>]</span>
The goal would be for the extension to display the text "5" over the icon.
What's the best way to do this? I've tried configuring the background.html page with an iframe with the URL with the ticket count as the source, but then I run into the cross-domain scripting issue. document.getElementById("tickets_count").innerHTML can't use a specified URL, as near as I've found.
I'm sure I haven't described it very well at all - totally floundering here, to be honest...let me know what I can clarify, and I'll edit my post.
Thanks!
It depends on whether the page you're looking at is static (e.g. the server sends you HTML with this information already in it) or dynamic (e.g. some JavaScript on the page requests additional information and then adds this to the page).
If it's static, you can use XHR to request the page and find the string you need in the "raw" HTML response. You can't use getElementById in that case - you'll need to find a way to find the string yourself.
If it's dynamic, that won't work. An iframe-in-the-background approach is valid - but you can't access the contents of the iframe. Instead, you should inject a content script in that page and request the information you need.
I understand it's a broad answer - but your question is also quite broad.
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.
Does anyone have a good solution for getting and setting variables in window.location.hash?
Take a URL that looks like this:
domain.com/#q=1&s=2
What I'd like is an unstressful way - JavaScript or jQuery - to check the values of q and s when the page loads, and change them following events on the page.
I have found some code for getting hash variables, but nothing sensible for setting them.
Am I missing something really obvious, or do I need to roll my own solution (and release it!)?
Thanks.
Haven't used it but there is jHash
jHash allows you to work with the
'location.hash' value in a similar
fashion to a server-side query string.
This library utilizes the HTML5
"onhashchange" event, but also
includes a fall back to still allow
the change notifications to work
properly in older web browsers.
jQuery BBQ can do this.
See also:
Get URL parameter with jQuery
Get QueryString values with jQuery
Edit as #gonchuki points out, jQuery.query can also do this.
JHash didn't work for me in that I wanted it to trigger the routes right away. I personally used routie instead.
It lets you do advanced routing just like jHash but will trigger on page load correctly.
Below will match example.com/#users/john
routie('users/:name', function(name) {
//name == 'bob';
});
I need to link to a page that uses javascript to create the appearance of different pages. Each of the links on the page I am pointing to calls a javascript function that produces the "new" page. So, if I just link to the page, I get the default configuration. But what I need to link to is a particular configuration after the js function has run.
At first I thought I would be able to append the function to the url, but apparently that functionality is not supported for security reasons (is this correct?). Is it possible to post the values?
Does anyone know how I can display the correct configuration?
In the general case, no, it's not possible, which is why these sort of JavaScript-only pages are an inaccessible, unusable total pain in the neck and people should stop creating them, the idiots.
If you are lucky and the site you're talking about has actually Done It Properly, then they'll have used #fragment navigation, so when you click a link it does a history-able and bookmark-able navigation, updating the URL to one with a #something at the end that you can use to navigate back there. If you're really lucky, there might even be a fallback URL for non-JavaScript browsers that you could link to. But more often all there is is a JS function, which you can't link to or invoke outside of that site, leaving you quite out of luck should you want to deep-link anything.
(Did we learn nothing from the <frame> fiasco, guys? All you trendy webmasters hacking up clever-clever swooshy jQuery-animated load()-powered multiple-pages-in-one sites are churning out rubbish that is no better than the frame-addled worst of the Netscape 3 era. Stop it. Seriously.)
Okay, I was given the solution by a friend. It seems I should answer my own question. In fact, I felt a little silly once I saw how simple the solutions was. I just forgot how to plant "posts" in a URL. It seems the question itself was erroneous.
All I really needed to do was set some Javascript variables in a page I don't own. Solution looks something like this.
http://www.apage.com/control.aspx?var1=someVal&var2=someVal...&varn=someVal
Thanks to those who responded.
The owner of the page could do you a favour and provide a mechanism to run functions depending on a value in the querystring.
Otherwise there may be something that can be done with ajax but it could be messy.