Okay so there are solutions for this as in Modify the URL without reloading the page but I have one question regarding this.
So here is what I plan to do (let's assume my web address is example.com)
1. using pushState I plan to change the browser address to example.com/myprofile/myalbum. So to be clear, this new url may or may not exists but the browser address is changed regardless. In our case this url doesn't actually exist but we are using the address to mark a changed state of the webpage.
2. use ajax to load data regarding "myprofile > myalbum" to the same page.
But now here's the issue I have been thinking about. What if a user loads example.com/myprofile/myalbum directly on a, let's say, new tab. This page clearly throws a not found error because it doesn't exist.
So how do I load ajax corresponding to this fake url? For example http://www.usatoday.com/news/ seems to do this well (unless that's an iframe, which wouldn't be so nice).
You can add rewrite rules to your webserver, converting either specific URL's or some matching a pattern to something that your scripts can use to show the right page. You can have it rewrite the URL only internally, so the user still see the original URL in the browser. Such as:
RewriteRule /myprofile/(\w*) /index.php?path=/myprofile/$1
Different webservers will probably have different syntax, but they will be similar.
Related
You would think my problem would be so commonplace that there would be solutions all over the internet for it. But I can't find anything that really answers my question.
Let me summarise my situation:
I am using Open UI5.
I am coding an app which retrieves documents from various external websites. I want to display these documents inside my app, and not navigate to them, so I display the documents in an iframe. Haven't found any other way.
Some filetypes can be displayed natively, such as PDFs. Others, like Word, cannot - the easiest way I have found of displaying these is by using Google Docs, which implies changing the URL of the iframe's src from this :
http://example.com/my-target-doc.docx
to this:
http://docs.google.com/gview?url=example.com/my-target-doc.docx&embedded=true
Some of the external domains I retrieve the documents from require authentication. Therefore, I cannot set the iframe's src to http://docs.google.com/gview?url=example.com/my-target-doc.docx&embedded=true directly - Google docs would attempt to display the authentication page. I must keep the original URL, and then, once the user's authenticated, replace the document URL with the Google docs version of the same URL.
What I am trying to do, then, is use the iframe's "onload" event to get the currently loaded page's address and, if it is a .doc/.docx/.ppt etc, replace that same URL with the GD version of the URL.
The difficulty is that there is no extension at the end of the URL which points to the document - none of the URLs I need to use end with ".doc", ".ppt" or whatever, so parsing the URL is out.
So this is my question : Is there a way in Javascript to get the type of the content being returned? To be fair, I am pretty doubtful there is. Other ideas or alternatives are welcome. I am still actively looking for some.
Thanks!
Did you already look at the Content-type HTTP header? This can be read with JS, but you probably have to request the file asynchronously for that.
I am working on a free domain service provider and it appends its own brand name to my URL on the browser address bar. I want to prevent that by re-writing the URL to give the user a better look and feel. How do I do that using only Javascript (no add-on libraries)?
window.history.pushState(null,'title','/something');
First argument is data, you don't need that.
Second one is the new page title.
Third one is the url. However you cannot completely change it, it will still be relative to the domain.
Note: The question is not how to fix the problem, as that is documented elsewhere on SO (e.g., Integrating Facebook to the leads to blank pages on some browsers / fb_xd_fragment).
1) What causes this, and under what conditions is it triggered?
2) More importantly, does this affect end users at all? For instance, how does this bug affect the URL shared by someone who clicks the FB Like button? If someone clicks the FB Like button from URL A, does URL A still get shared (but with "fb_xd_fragment" appended), or does URL A become your root URL (with "fb_xd_fragment")? In our logs, all the URLs appear as the root URL with "fb_xd_fragment" appended, so we're not sure if this is because people are clicking the Like button from the home page, or if all the shared URLs get morphed into the root URL.
Basically, what happens is whenever you use the JS API it opens your site in another iframe to use as a cross-domain receiver. What you can do is set a custom channel URL and it will use that instead. If seeing this bothers you, you can set a custom channel url. More information on http://developers.facebook.com/docs/reference/javascript/FB.init/
Still now I knew Its not Possible to change the contents of location bar without changing the page (and Yes I am not talking about #). I've recently noticed github.com. How they are doing that on their site ? they can easily get an event when user clicks on Browser's back or next button. dojo.back also have this feature. But how to change the addressbar with javascript without leaving the page ?
There are two ways:
HTML5's pushState() function. Facebook and Github use this, for example. It allows you to modify the complete URL and fires event handlers when the history state changes. Mozilla has a good overview.
The old variant is to use the hash part of the URL (this is what Twitter does). This means that you change window.location.hash, monitor it for changes and, based on the value of that hash, load the appropriate content. However, this means that when the user requests, say, http://twitter.com/#!/27c3/status/18331752900591616, only the part before the hash sign is requested form the webserver, everything after the hash is only the client's business. This means that the server can not yet decide what content to hand to the client.
try dojo.hash
What you're referring to on GitHub is the # (hash). When you right click on a line number, it adds the number to your hash.
window.location.hash = 'HELLO';
Put that in a page to try it out. It's not possible to change window.location without the page reloading. The back button stuff is a little trickier, but Dojo is your best bet for that. jQuery doesn't provide this. Dojo has pretty clean code though, so you should be able to reverse engineer their functions (if you chose to include that functionality into your own library).
You'll also notice Google is doing the same with: http://code.google.com/p/digitalxero/source/browse/#svn%2Ftrunk%2Flocale%2Fde
If you click on folders (left), it changes the hash, and provides different content.
I've coded an HTML page using jQuery for loading content. Now if I want to link directly to a submenu, is this possible to do with JavaScript?
So for example if someone goes to www.mydomain.com/submenu1/
then some JavaScript code will execute and load the needed contents?
Thanks a lot :)
Is it possible to realize that with htaccess?
You will more likely want to have a URL structure that only needs a page to load from the server once, then the server is only queried by JavaScript XMLHttpRequests. Loading content based on a "hard" URL would be pointless, since you're doing a server request anyways and might as well return the content in the response.
For keeping addresses unique while still keeping the "hard" URL the same (preventing multiple server requests), you can use the hash/anchor part of the URL. This means your address might look something like this: http://www.example.com/#/submenu1/
The #/submenu1/ part stays on the client, so only / on www.example.com is requested. Then it's up to your JavaScript to load the content relevant to /submenu1/. See a page of mine for an example of this: http://blixt.org/js#project/hash?view=code
Also have a look at this question: Keeping history of hash/anchor changes in JavaScript