Changing url parameter with js without reloading page on button click [duplicate] - javascript

This question already has answers here:
How do I modify the URL without reloading the page?
(20 answers)
Closed 8 years ago.
is it possible to change parameter in url bar so button onclick the parameter to get changed ? So far I have this:
function change_product(){
var url = 'http://www.example.com/index.php?product=805';
var newSrc = '0';
newurl=url.replace(/(product=)[^\&]+/,'$1' + newSrc)
alert(newurl);
}
<button class="save" type="BUTTON" onclick="change_product();">Copy</button>
newurl is correct but how to make it change in the url bar? Is it possible at all without page reload?
thanks in advance !

Take a look at window.history.pushState()
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
This allows you to change the URL in the address bar without reloading the page.
Here's the current support: http://caniuse.com/#search=pushstate
var state = {}, newUrl = "test.html";
window.history.pushState(state, "Page Title", newUrl);
So for you something like
function change_product(){
var productId = 805;
window.history.pushState({productId: productId} , "", "?product=" + productId);
}
Firefox currently does use the Page Title but you could set it in the state object then use window.onpopstate to get the state object and set the page title (if you need to).
If you need to support older IE browsers there's a few libraries that can help you out (like history.js)

Related

Hide # From Urls Javascript [duplicate]

This question already has answers here:
How to remove the hash from window.location (URL) with JavaScript without page refresh?
(17 answers)
Closed 6 years ago.
after working on an interactive site that automatically navigates using ids in the url, I was wondering how to hide that while it will still navigate normally. After some research on here, I found the following script which doesn't work for me.
if ($.browser.msie && parseInt($.browser.version, 10) === 9 && window.location.href.indexOf("#"))
{
document.location.href = String( document.location.href ).replace( /#/, "" );
}
ankit Chaudhary & jetpack pony answered my question, I just had concerns that were dealt with.
You are replacing only "#" symbol in your replace method. To replace the whole hash it should look like this:
.replace(/#.+$/, "");
Also, instead of document.location.href consider using HTML5 history API. It provides 2 methods:
pushState(): it changes the URL in the URL bar and creates a new history entry. For example if you are on a page example.com/#foo and you call history.pushState("", "", "example.com"), your URL bar will display example.com and when you press a browser back arrow, it will take you back to example.com/#foo.
replaceState(): it changes the URL in the URL bar and replaces a current history entry. Meaning that in the same example as above, browser back arrow will take you to a page before example.com/#foo.
Here is an example of your code using pushState():
var loc = window.location;
if (loc.hash) {
history.pushState({}, document.title, loc.pathname + loc.search);
}
The browser support of this API is very good for details check: Browser compatibility
You could use the pushState method to manipulate the URL without reloading/refreshing the page.
window.history.pushState(
"object or string",
"Title",
window.location.href.substring(0, window.location.href.indexOf('#'))
);

Get Url From Another Opened Window With Different Origin

I want ask something:
I need to open different site from main window using
window.open(http://different-site.com/new_window_pt1,'New Window')
And I want to make that opened window closed if the url on that window contains token params:
http://different-site.com/new_window_pt2?token=sometokenthingshere
then send that params to main window.
Is it possible?
Thanks in advance.. :)
when you do
var win1 = window.open;
you have the handle to that window already and you can read its URL by
var win1URL = win1.location.href;
and if you are looking for only parameter values after ? then
var win1URLSearch = win1.location.search;
now you can search this value to see if it contains token (didn't get from your question about this search part). If this condition is true then
win1.close();

How to refresh a page in JavaScript without POSTing?

I've seen this question already, but the top answers all suggest window.location.reload. I've just discovered that this will actually do a POST if your page was loaded with a POST.
I reckon I could do window.location.href=window.location.href but that won't work if there's a hashtag in the URL I'm told.
So how can I get the browser to perform a GET on the current page, including query params (with or without the hash)?
You can manually construct your URL:
window.location.href=window.location.origin + window.location.pathname + window.location.hash;
function refresh() {
window.location.href = window.location.pathname + window.location.search;
};
You don't need the origin (it doesn't work in old IE anyway). You should add .search if you want to keep the query params. Don't add .hash because it won't refresh if there is one.

How do I return part of the url using window.location.hash

I am really stuck
I am currently using the code below to add the name of a dynamically loaded page to the url
var value = $(this).attr('href');
e.preventDefault();
window.location.hash = value;
it almost works as its returning this in the url
http://www.sitename.com/dev888/#http://www.sitename.com/dev888/page-name
But I the only want part of the url to return like the example below
http://www.sitename.com/dev888/#/page-name
How can I edit the code above to get my desired result?
Thank!!
You can play with the value to get the last one like this
var value = $(this).attr('href');
e.preventDefault();
var parts = value.split("/");
value = parts[parts.length-1];
window.location.hash = value;
Or you can change the attr('href') to the value you want directly :)
I hope this can help
And you may want to take a look at pusState
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
The browser already does this for you. Just make your link's href the hash, and let the user click it normally:
Click!
It will automatically append #my-hash to the URL.
Trying to accomplish this with JavaScript is totally wrong, unless you require logic to prevent the click under certain conditions, and even then the correct behaviour is to specify your hash as the href of the link, conditionally allowing the click event to be handled by the browser.
Maybe you find interesting to obtain the title of the page and use it in the hash
var current_title = $(document).attr('title');
e.preventDefault();
window.location.hash = current_title ;

Add-ons SDK Mozilla Firefox currentURI

I work with a https://addons.mozilla.org/en-US/developers/builder (Add-ons builder) and I try to do the following things:
1.How to change currentURI address? Method setTabURL() is not suitable because immediately opens the URL.
While found a way out:
tab.attach ({
contentScript: "history.pushState ('','', '" + tab.url + "');",
});
2.How to get the url address that is entered in the address bar? Method getTabURL() only shows the address at which settled.
3.How to add text to an icon in the toolbar? I use it here: https://builder.addons.mozilla.org/package/166563/
To access the URL bar and it's relate value you have to dig into the browser chrome a bit.
This code snippet will get/set the URL bar value for the currently focused browser window:
var wuntils = require('sdk/window/utils');
var document = wuntils.getMostRecentBrowserWindow().document;
// log the current URL bar value
console.log(document.getElementById("urlbar").value);
// change the current URL bar value (this won't change the page)
document.getElementById("urlbar").value = "Thrift Shop";

Categories

Resources