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;
Related
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 developing a web app using jQuery Mobile 1.4.5. I have a page where I pass GET parameters, e.g. like this:
index.php?page=locations&id=12
However, when entering the site with this URL and switching to another page using page transitions, there is no way a popup can be opened like this:
click me
Popups can still be opened using the $("#myPopup").popup('open'); function call, but this is not what I want.
If I remove the &id=12 from the URL, the above link works correctly, so the problem must be the "&" sign within the URL breaking something internal in JQM. I guess there's some hidden referrer which still points to the original URL containing the &id=12.
This can be tested using the following: I've switched to page
index.php?page=users
coming originally from
index.php?page=locations&id=12
Then I changed the URL to the following by hand:
index.php?page=users#myPopup
What I got then was:
index.php?page=locations&id=12#myPopup
(which did nothing).
So is there any way I can get rid of this problem without having to switch to using Javascript calls? I also need the GET parameters within my PHP scripts, so switching to another method is not what I'd like to do.
I have a problem regarding to jquery and jsp. I used a jquery load() to load the data on the same page but the main problem was when it was loading the url remains same as the home page but i want to change the url to what the data i have clicked. I already used meta refresh tag but it not working on jsp pages so Please help me to complete the task that to paste the url what the page i have been clicked.I used html tags and javasript and jquery which was saved in jsp pages.
Use window.history.pushState :
window.history.pushState({},'',"http://newurl.com");
and on jQUery .load example :
$("#div").load("http://mysite.com/newpage",function(){
window.history.pushState({},'newpage', "http://mysite.com/newpage");
});
And if you want to change the title of document as well, use :
document.getElementsByTagName('title')[0].innerHTML = 'New Page';
window.history.pushState({},'newpage','http://mysite.com/newpage' );
If you're concerned about compatibility towards older browsers and the more modern (although outdated) versions of IE, you have little choice that I'm aware of but either using a redirect which triggers an entire page load, or use the hash sign, which you can access via
document.location.hash
If you're not concerned about that, have a look at the HTML5 history API (http://diveintohtml5.info/history.html)
It's as simple as
history.pushState(null, null, 'newURL')
And doesn't break compatibility with the browsers back and forward buttons, provided your page takes those into account.
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.
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