I know there have been variations of this question asked a thousand times on stack overflow but none of them really relate to what I need to accomplish here.
I have a form that when submitted it adds a query string to the url after the page reloads. I simply would like to know a way to remove this query string from the browser url WITHOUT reloading the page.
Currently with what I have below, a user will submit the form and the page reloads and has query string in the browser url then the below will run but it reloads the page for a second time. How can I make it to where it won't reload 2 times but still strip the query string from the url?
window.location.href = window.location.href.split('?')[0];
Most browsers won't allow you to change the address programmatically without submitting the page. You could obfuscate it by using iframes on your page. The frame would then be loaded with content, but the URL would be that of the main page.
I think you are looking for:
window.history.replaceState
Related
I am making a webpage which fetches query results from database.
The problem is whenever I reload page in Chorme, it redirects the page back to the home page instead of loading the same page again albeit it is redirecting correctly in FireFox and Safari.
For Example:
If the search URl is : http://bug.xyz.com/#/?bug_package=Demo&ndays=0
When I reload/refresh the page in chrome it takes me back to http://bug.xyz.com/ but I want it to reload the present URL only.
Language used: JavaScript
P.S. The link is for example purpose only and it will not work as the website is on intranet only.
My only thought is, what is the /#/ bit for. It may be what's causing your problem.
Otherwise you'll need to post some code.
After a user has logged in via a fancybox (javascript) popup I wish to reload the parent page so they can access the logged in features.
Currently I am doing this with:
Continue
This works great, but the only issue is that it completely reloads the entire page: redownloads all the css & javascipt, etc.
All I want to do is reload the page normally, not a full refresh. How can I achieve this?
(I do not know the exact URL because the login can be done from any page via the fancybox, so I can't hardcode the URL.)
Another way of reloading the page i have seen in the facebook graph api is the following:
window.location = window.location
or in your case:
window.top.location = window.top.location
This solution reloads the page without trying to resend a POST request. Might be useful. for more information look at the following SO question.
Use:
location.replace(location.href.split('#')[0]);
The split on hash is required, otherwise an url with a hash will not be refreshed.
If you want to keep the previous load in browser history, use assign instead of replace.
href is not currently supported by Opera, according to MDN.
A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.
I have an AJAXed page, but I also offer a query string to the user so that he/she may type in the query string to the url to see the same page again. (Think google maps and its "share link" feature).
When the AJAX request occurs I update the query string presented to the user, but the actual URL does not change. The problem is, if a user refreshes the page, all the DOM elements created from AJAX disappear.
What I want to do is have javascript capture the refresh event, and instead of refreshing the page, redirect the user to the page plus the query string.
ie if query string is: ?data=blah&stuff=bleh
then instead of refreshing page back to www.example.com, refreshing would lead the user to www.example.com/?data=blah&stuff=bleh
You can't change the querystring...without the browser actually leaving the page and fetching a new one (kind of killing the point of AJAX).
You can go to a hash though, like this: www.example.com/#data=blah&stuff=bleh
In your script just set the window.location.hash, e.g.:
window.location.hash = "data=blah$stuff=bleh";
When your page loads, you'll need to actually use the hash...for example: using it as the data parameter to do the same AJAX call you made before.
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?