In my Angular JS website, I wish to append the text "#Page/" to the URL using Javascript. Here my problem is that the forward slash(/) is getting added when using the code Location.hash
For example, Let say the URL is https://MyWebsite.com/Products
var location = window.location;
location.hash = "#page/" + pageNumber;
window.location = location
After executing the above code, the Window.location turned out to be https://MyWebsite.com/Products/#page/1.
But what I need is the forward slash(/) should not be included between products and #page.
https://MyWebsite.com/Products#page/1.
The strange thing is that when I checked the same code with the other websites don't have Angular JS, implemented only with the Asp.net Webforms and ASP.net MVC, I got the desired result.
Does this kind of issue have something to do with the Angular JS?
I believe # is special character reserved for a page fragment reference.
See https://www.ietf.org/rfc/rfc3986.txt
Can you do with without # or use the # to reference the fragment? e.g.
window.location.href += 'page/' + pageNumber + '#' + pageFragment;
I have Scenario like: Below,
Following a "Menu List" having href value set to corresponding ".htm" Pages inside "Menu.html"
Click Me to got to pageOne.htm
Click Me to got to pageTwo.htm
Click Me to got to pageThree.htm
Click Me to got to pageFour.htm
Each Pages pageOne.htm, pageTwo.htm & pageThree.htm etc.. are having footer part, In footer it must be like it has to contain 3 Links with href values.
I require a solution:
If my Current page is pageOne.htm the Footer should show me shortcuts links to pageTwo.htm, pageThree.htm and pageFour.htm and wise verse depending on my current page.
So I require code to Get .htm from URL pathname.
Can we find() method of Jquery after getting the URL PATH like find(".htm") from URL.
Require just a snippet of Code to get the .htm page name alone.
Including an sample case below:
What if the Url is Like >>
"http://<10.10.21.26:9080>/myTestAoo/pageThree.htm#detailView"
I wish to get the value "pageThree.htm" alone from above url, if its the current page.
Thanks in advance
var lastPartOfUrl = document.URL.split('/').pop();
Or with regular expression:
var regexp = /([^\/]+)(.htm)/;
var match = regexp.exec(document.URL);
console.log(match[0]); // pageThree.htm
console.log(match[1]); // pageThree
console.log(match[2]); // .htm
The following will give you the current URL, which you can tidy up using replace():
window.location.href
you may try this code:
var a = window.location.href;
var fileName = a.substring(a.lastIndexOf('/')+1);
alert(fileName);
use window.location.pathname; will returns the full path
try following function
function getFileName(){
var url = window.location.pathname;
var path=url.split("/");
var filname=path[path.length-1];
return filname;
}
I have seen posts on here to remove the hash value from a url... but how do remove the value and the # itself.
for example if a url was
mysite.com
and when a user navigates through the one page application the url might change to
mysite.com#mytest
so when they reload it i just want it to show
mysite.com and not mysite.com#mytest
these two just remove the value
location.hash = 'home';
window.location.replace("#");
thanks
var href = window.location.href;
var index = href.indexOf('#');
if ( index > 0) {
window.location = href.substring(0, index);
}
I don't think it's possible to remove the hash without reloading the page.
I have a popup call which takes the user credentials and login the user. Usully user would like to same page after login also. That's way I want to refresh the current page. I am using
window.location.href="currentrul";
This works just fine when we don't have # symbol in url. Let's say my URL is something like http://www.test.com/faq#shipping, it won't works. Any suggestions are appreciable.
Thanks in advance
If you want to refresh the page, use:
window.location.reload();
No, because # signifies an anchor on the same page.
The fragment identifier introduced by a hash mark # is the optional
last part of a URL for a document. It is typically used to identify a
portion of that document. The generic syntax is specified in RFC 3986.
The hash mark separator in URIs does not belong to the fragment
identifier.
Source: http://en.wikipedia.org/wiki/Fragment_identifier
try this:
var currentURL = window.location.href;
if(currentURL.indexOf('#') != -1){
currentURL = currentURL.substr(0, currentURL.indexOf('#'));
}
window.location.href = currentURL;
Is there a way to update the URL programatically without reloading the page?
EDIT: I added something in the title in post .I just want to make it clear that I don't want to reload the page
Yes and no. All the common web browsers has a security measure to prevent that. The goal is to prevent people from creating replicas of websites, change the URL to make it look correct, and then be able to trick people and get their info.
However, some HTML5 compatible web browsers has implemented an History API that can be used for something similar to what you want:
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
window.history.pushState({path:newurl},'',newurl);
}
I tested, and it worked fine. It does not reload the page, but it only allows you to change the URL query. You would not be able to change the protocol or the host values.
For more information:
http://diveintohtml5.info/history.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Yes - document.location = "http://my.new.url.com"
You can also retrieve it the same way eg.
var myURL = document.location;
document.location = myURL + "?a=parameter";
The location object has a number of useful properties too:
hash Returns the anchor portion of a URL
host Returns the hostname and port of a URL
hostname Returns the hostname of a URL
href Returns the entire URL
pathname Returns the path name of a URL
port Returns the port number the server uses for a URL
protocol Returns the protocol of a URL
search Returns the query portion of a URL
EDIT:
Setting the hash of the document.location shouldn't reload the page, just alter where on the page the focus is. So updating to #myId will scroll to the element with id="myId". If the id doesn't exist I believe nothing will happen? (Need to confirm on various browsers though)
EDIT2: To make it clear, not just in a comment:
You can't update the whole URL with javascript without changing the page, this is a security restriction. Otherwise you could click on a link to a random page, crafted to look like gmail, and instantly change the URL to www.gmail.com and steal people's login details.
You can change the part after the domain on some browsers to cope with AJAX style things, but that's already been linked to by Osiris. What's more, you probably shouldn't do this, even if you could. The URL tells the user where he/she is on your site. If you change it without changing the page contents, it's becomes a little confusing.
You can use :
window.history.pushState('obj', 'newtitle', newUrlWithQueryString)
Use
window.history.replaceState({}, document.title, updatedUri);
To update Url without reloading the page
var url = window.location.href;
var urlParts = url.split('?');
if (urlParts.length > 0) {
var baseUrl = urlParts[0];
var queryString = urlParts[1];
//update queryString in here...I have added a new string at the end in this example
var updatedQueryString = queryString + 'this_is_the_new_url'
var updatedUri = baseUrl + '?' + updatedQueryString;
window.history.replaceState({}, document.title, updatedUri);
}
To remove Query string without reloading the page
var url = window.location.href;
if (url.indexOf("?") > 0) {
var updatedUri = url.substring(0, url.indexOf("?"));
window.history.replaceState({}, document.title, updatedUri);
}
Define a new URL object, assign it the current url, append your parameter(s) to that URL object and finally push it to your browsers state.
var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);
Yes
document.location is the normal way.
However document.location is effectively the same as window.location, except for window.location is a bit more supported in older browsers so may be the prefferable choice.
Check out this thread on SO for more info:
What's the difference between window.location and document.location in JavaScript?
Prefix URL changes with a hashtag to avoid a redirect.
This redirects
location.href += '&test='true';
This doesn't redirect
location.href += '#&test='true';
Plain javascript: document.location = 'http://www.google.com';
This will cause a browser refresh though - consider using hashes if you're in need of having the URL updated to implement some kind of browsing history without reloading the page. You might want to look into jQuery.hashchange if this is the case.
You'll need to be more specific. What do you mean by 'update the URL'? It could mean automatically navigating to a different page, which is certainly possible.
If you want to just update the contents of the address bar without reloading the page, see Modify the URL without reloading the page
Yes - document.location.hash for queries