Creating Bookmarklet: Append current URL with specific string - javascript

I am attempting to create a bookmarklet that will change the URL of the page I am currently on, and load a new page with the URL string changed. I have reviewed a number of other threads on bookmarklets, but I haven't found a solution that works for me.
I would like to be able to change a URL that looks like this:
http://mywebsite.com/directory/page.html?referral=Google&visit=1
to:
http://mywebsite.com/directory/page.html?dog=Fido&cat=Mittens
The three goals:
1) Delete anything in the existing URL after the ? mark.
2) Append "dog=Charlie&cat=Mittens" after the question mark.
3) Immediately load this new page, with the new URL
It seems simple enough, but I have not been able to figure out how to do this. Any help would be greatly appreciated!

Try this:
javascript: window.location = window.location.protocol + '//' + window.location.hostname + window.location.pathname + '?dog=Charlie&cat=Mittens';

Related

Javascript get url and redirect by adding to it

I have a situation where I need to get the current page url and redirect to a new page by adding to the current page url. For example:
http://www.mywebsite.com/page1/page2
needs to redirect to:
http://www.mywebsite.com/page1/page2/page3
I need it to be relative because "/page1/page2/" will always be different, but "page3" will always be the same.
I've tried: location.href = "./page3"; but that does not work. The result is:
http://www.mywebsite.com/page1/page3
Any thoughts?
Maybe this?:
location.href = location.pathname + "/page3";
Get and Set URL using either window.location.href or document.URL;
window.location.href = window.location.href + "/page3";
Should do what you're looking for.

Dynamically insert and execute a script resource

Hope I can explain this properly. We are currently inserting this external JS in our HTML:
<script src="https://NotOurDomain.com/SomeScript.js"></script>
The code in this script resource is something like this:
var callbackUrl = encodeURIComponent(window.location.href);
var token = encodeURIComponent('eidoasjdiojancoxjnegkjasd');
var url = 'https://NotOurDomain.com/path?token=' + token + '&callbackUrl=' + callbackUrl;
document.open();
document.write('<iframe src="' + url + '"></iframe>');
document.close();
This all works fine, but now I need to insert this dynamically. Problem is, I can't just copy the code in this script resource because the "token" part changes periodically.
How can I get this to work? Is it possible to load https://NotOurDomain.com/SomeScript.js as a string and parse out the token so that I could create and insert an iframe with the correct URL? Or is there a simpler way of doing this?
This obviously does not work because a script include will only execute on load:
jQuery('#someDiv').append('<script src="https://NotOurDomain.com/SomeScript.js"></script>');
But is there some way to get it to "eval" after inserting?

How can I get everything after the forward slash in my url?

When I visit my url, my script will get the current URL and store it in a variable with
var currentURL = (document.URL);
I'd like to get everything after the forward slash in my url because there will be a hash ID after the forward slash like this:
www.mysite.com/XdAs2
so this is what would be stored in my variable currentURL and I'd like to take only the XdAs2 from it and store that into another variable. In addition, I'd like to know two other things.
Is document.URL the best way to get the current URL or will I have issues with some browsers?
If I were to try to open that URL using an iframe, will document.URL still work? or must there be an address bar present containing the url? I would really appreciate answers for those questions three questions. Thank you
Here's some pseudo code:
var currentURL = (document.URL); // returns http://myplace.com/abcd
var part = currentURL.split("/")[1];
alert(part); // alerts abcd
Basically:
1) document.URL should work fine in all major browsers. For more info refer to this Mozilla Developer Network article or this SO question
2) for an iframe, you need to write something like: document.getElementById("iframe_ID").src.toString()
Using jquery, you can do he following in order to access every inch of the current URL:
www.mysite.com/XdAs2?x=123
assuming you have the following url:
1- get the url in a jQuery object
var currentUrl = $(location)
2- access everything using the following syntax
var result = currentUrl.attr('YOUR_DESIRED_PROPERTY');
some common properties:
hostname => www.mysite.com
pathname => XdAs2
search => ?x=123
I hope this may help.
If you want everything after the host, use window.location.pathname
Following on from Mohammed's answer you can do the same thing in vanilla javascript:
var urlPath = location.pathname,
urlHost = location.hostname;

How do we update URL or query strings using javascript/jQuery without reloading the page?

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

add path into Current URL Location

I am coding to change language by using Read with Korea Language
Example:
Currently URL is:
http://www.domain.com/EN/index.php
When user press onClick URL change to:
http://www.domain.com/KO/index.php
I mean that I just want to replace EN to KO then reload page again.
Appreciate for your help.
If you reload the page, why not just use normal a href.
KO
Use the window.location object to get to the new URL:
window.location = window.location.protocol + "//"
+ window.location.host + window.location.pathname.replace("EN", "KO");
Or I guess simpler, just:
window.location = window.location.href.replace("/EN/", "/KO/");
If you want to load region specific URL check IP filtering for geological locations. Depending upon IP you'll get, load corresponding URL. e.g. You can use :
if(ip address coming from <region>)
window.location.replace("http://www.domain.com/<region>/index.php");

Categories

Resources