I have the following code that changes the pages from within JavaScript:
var newUrl = [some code to build up URL string];
window.location.replace(newUrl);
But it doesn't change the top URL, so when someone clicks the back button it doesn't go back to the previous page.
How can I have JavaScript change the top URL as well so the browser back button works.
document.location.href = newUrl;
https://developer.mozilla.org/en-US/docs/Web/API/document.location
Simple assigning to window.location or window.location.href should be fine:
window.location = newUrl;
However, your new URL will cause the browser to load the new page, but it sounds like you'd like to modify the URL without leaving the current page. You have two options for this:
Use the URL hash. For example, you can go from example.com to example.com#foo without loading a new page. You can simply set window.location.hash to make this easy. Then, you should listen to the HTML5 hashchange event, which will be fired when the user presses the back button. This is not supported in older versions of IE, but check out jQuery BBQ, which makes this work in all browsers.
You could use HTML5 History to modify the path without reloading the page. This will allow you to change from example.com/foo to example.com/bar. Using this is easy:
window.history.pushState("example.com/foo");
When the user presses "back", you'll receive the window's popstate event, which you can easily listen to (jQuery):
$(window).bind("popstate", function(e) { alert("location changed"); });
Unfortunately, this is only supported in very modern browsers, like Chrome, Safari, and the Firefox 4 beta.
If you just want to update the relative path you can also do
window.location.pathname = '/relative-link'
"http://domain.com" -> "http://domain.com/relative-link"
Hmm, I would use
window.location = 'http://localhost/index.html#?options=go_here';
I'm not exactly sure if that is what you mean.
This will do it:
window.history.pushState(null,null,'https://www.google.com');
<script>
var url= "http://www.google.com";
window.location = url;
</script>
The best way to redirect the user to another URL is by using window.location.assign (See https://developer.mozilla.org/en-US/docs/Web/API/Location/assign).
Nevertheless, if what you want is to change the URL of the page without redirecting the user, then you may use the window.history.replaceState function (See https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). A combination of this and window.history.pushState is what Single Page Applications (SPAs) use nowadays to keep track of the user navigating throughout the application so that the back button works as expected
You can take a look at the examples in the documentation links I provided to give you an idea on the usage of these functions
Related
I am using Bootstrap, CSS, HTML, JavaScript/jQuery for designing my project. I have used some jQuery plugin in my project hence my button & <a> tag are not working. When I click on it doesn't redirect me to my webpage. How can I reactivate all <a> tag & button from a webpage using jQuery.
Access the portal
It depends on what plugin you have activated: try disabling the one by one.
Probably one of them ( or your code ) is listening to the click event on the links and preventing the event.
Something like this:
$('a').on('click', function(e) {
e.preventDefault();
.... // more code
} )
In that case you should listen to more specific tags (like, using a class to identify them) and leave the general behaviour for link unaltered.
Simply use the window.location "href" property, or "replace" method:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
See here reference
One does not simply redirect using jQuery
jQuery is not necessary, and window.location.replace(...) will best simulate an HTTP redirect.
window.location.replace(...) is better than using window.location.href, because replace() does not keep the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco.
If you want to simulate someone clicking on a link, use location.href
If you want to simulate an HTTP redirect, use location.replace
For example:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
I'm working in writing a chrome extension, and as a result I have the peculiar situation of using non-cross domain Iframes, without the ability to alter the page being displayed in the frame.
When a user clicks a certain link, in he iframe, I want to run some JavaScript. The default behavior for clicking that link is to load page targetpage.com. I don't think it's possible, or easy, to read listen for a particular element being clicked inside an iframe
As a workaround, I figure I can check if the iframe reloads, pointing to targetpage.com, and then perform the action.
Note: the action is entirely in the parent page, let's imagine I'm just trying to trigger an alert box.
I know how to trigger JavaScript when an iframe loads. My three questions are:
1) how can I check the url of an iframe?
2) is there a way to check the iframe, url prior to targetpage.com being loaded. Esther than after?
3) is there a better solution?
You could listen to webNavigation.onBeforeNavigate in background page, it fires when a navigation is about to occur, and you could get url and frameId in the callback parameter.
This may not be the best answer because I haven't played around with this much.
Chrome has a webNavigation API that looks to be something which may come in handy for your extension.
However if you want to get the current domain you're on you'd use...
document.domain
If you're in a subdirectory of that domain you can grab that with...
window.location
It also works with an added hash to the url.
If you want the url without the hash you could use document.referrer or if you feel hacky you could do something like...
var str = window.location
var res = str.toString().split(str.hash)
document.body.innerHTML = res
I'm currently using one page to spawn a new window, with a timed playback URLs in it. Many of the pages it's loading respond to hash navigation. I'm doing this like:
window.open(url,"playback");
As we play through the URLs, we should see the page respond accordingly. The problem I've run into however, is that the window.open() call actually reloads the page when the hash is changed.
For instance, loading "pageA.htm", then "pageB.htm#tab2" works flawlessly. The issue however is that when I try to go from "pageB.htm#tab2" to "pageB.htm#tab3"; the page reloads (responding properly to hash) completely instead of just firing "onhashchange" as I'd expect.
Is there an alternative to window.open() that I should call for hash-only changes, that will prevent full page reload?
Edit: The final solution looks something like this:
playbackWindow = window.open(url,"playback");
Then when we want to change the hash:
playbackWindow.location.href = "poundIt";
You can't use window.open to change the hash without reloading the page. Simply change the value of window.location.hash instead.
window.location.hash = "This";
should do the trick.
We are using the jQuery Address plugin to sort filters in the url of a page. For example:
/Page.aspx#/?PageIndex=0&SortFieldName=Name&SortDirection=ASC
Now when you are on the page and changing the filter it updates the URL Fragment (part after #) using the jQuery Address functions. but on other pages we sometimes want to link directly to the URL above instead of just
/Page.aspx
It all browsers but IE this is fine. We have a small function which simply does this.
document.location.href = url;
Where its passed the full URL with URL Fragment. Oddly though IE9 seems to ignore the Fragment and ends up on just.
/Page.aspx
But it doesnt do this all the time. For example I have another page which If i click on before going to a page with a URL Fragment E.g. I go to Company.aspx before then going to the Page.aspx#/?PageIndex=0&SortFieldName=Name&SortDirection=ASC it works fine..
very strange behaviour indeed
document.location is supposed to be read-only.
If you want to change the URL then you should use window.location:
window.location.href = url;
What's the difference between clicking on:
<a href />
vs.
calling window.location.href = ...
?
Wherever possible, you should use <a href="foo.html"> over window.location.href, for a number of very good reasons.
If you have javascript disabled, none of the links would work.
Spiders, such as Google Bot, do not interpret javascript, and so they won't follow any of your links.
IT BREAKS THE INTERNET. No, really though - the World Wide Web is built on the very basis of discoverable linkages between pages. Hiding these linkages with non-standard .. err, links, goes against that very premise.
It makes for a bad user experience: a user expects that when they mouse over a link, they will have access to some information:
the destination displayed in the status bar (very important!)
right-click -> copy link location
middle-click -> open new tab
etc
Using window.location breaks all of these
It's much easier!
Setting window.location.href = 'thepage.html' is the same as calling:
window.open('thepage.html', '_self');
I.e. the target is limited to the same window, as that is where the location property is. This has the same effect as clicking a link without a target attribute:
...
You can use the open method instead to specify a different target, like a new window:
window.open('thepage.html', '_blank');
This has the same effect as clicking a link with that target:
...
You can also use the open method to open a new window. The return value is a reference to the window, so you can use that to set the location of that window instead of the current window:
var w = window.open('about:blank', '_blank');
w.location.href = 'thepage.html';
Don't forget that in addition to the above answers, clicking on a hyperlink (anchor tag) will trigger that element's onclick handler (if any), whereas the Javascript version clearly doesn't and just changes the window's location.
It is possible to manually invoke the onclick handler from Javascript if you want to simulate a click, but you must remember to do this manually. The snippets you posted would differ in this regard, which could be the cause of any behavioural differences.
With the anchor you can specify the target property, but with window.location.href you can't.
Generally the anchor is used when a user wants to redirect the browser to another location, window.location.href is used when the redirection is done using javascript.
In addition to the other answers given, clicking on an <a> element with the href attribute sapecified will cause the browser to navigate to the URL in the href, regardless of whether JavaScript is enabled or not.
document.referrer contains a reference on the server and client to the url of the page that contained the link the user clicked to get to the new page-
scripted location methods do not.