Using Javascript to alter every url on page - javascript

I am not sure if there is a name for what I want to do, but I would like to use javascript to alter every url on a webpage on my website. So if someone posts a url such as:
visit http://www.blah.com
when viewing this page, I want javascript to change it to:
visit http://www.mysite.com/count.php?out=http://www.blah.com
I know about the two urls in one I will handle that part, I just used this as an example of placing the same text in front of every url in the page. Kinda like how thewaybackmachine does it. Thanks.

Using jQuery:
$("a").attr('href', "http://test.com?blah=" + $(this).attr('href'));
This code searches for all a tags on the page, and replaces the contents of the href attribute with http://test.com?blah= followed by the original contents of the href attribute.
To try it out, You can copy it, hit 'f12', paste it into the console, hit enter, and see it's effects on this page right here! (also breaking all your links...)

Here's a way, without the need for JQuery. (loading and parsing a pretty big library in order to just do one simple thing may be a bit much..)
[].slice.call(document.querySelectorAll('a')).map(function(a){ a.href = 'http://somesite.com/count.php?' + a.href })

Related

How to replace part of any matching URL in Firefox before loading

There are several variations of the question how to replace part of the URL with JavaScript?
but the solutions work for a current url, so first you load a page and then click on the bookmark that stores the javascript code to go to the edited location.
Is there a way to make this a default in Firefox? That is, if I click on a link and that link contains a specific chunk /epdf/ I want that chunk replaced with /pdf/ before loading the page in the first place.
I have created a bookmark that contains the script
javascript:var url = window.location.toString(); window.location = url.replace(/epdf/, 'pdf');
but that has the limitation I described above. Is there a way to perhaps load that script as a plugin on Firefox?
(I am way out of my depth here, not even sure what search terms to use for this)

changing URL into clicked elements on the page without reloading the page

Update browser address bar without reload
I found this about making the URL change without updating.
I want to make a website like
http://fancytext.blogspot.ie/
but instead of adding the symbols to the text box there I want the symbols to overwrite the URL on the address bar is this possible with javascript or ruby?
You can "push" any text into the address bar using pushState and it's simple like hell:
window.history.pushState({url: yourUrl}, null, yourUrl);
remember:
you could use full address, when you try to push url, other ways the path in url will be appended to current url, when you try to use slashes (if I remember correctly)
Working example is my own site, where address is changing while you scrolling thru page http://dariuszm.pl (may not work on older browsers)
Definitely possible. You simply need to put a hash (#) before your symbol. Anything after the # does not result in a page change.
You can easily set it without JavaScript by the href in an a tag...
Ⓐ
But if you're desperate to use JavaScript, it can be done there as well...
<script>
location.hash = '#Ⓐ';
</script>

Replacing the page url with another one with Javascript

I know there is plenty on the subject but not what exactly i want...
I've tried window.location.replace("http://gmail.com")but it replaces the content only in a specific <div> in the page instead of the whole page..
In the w3schools tutorials of location.replace for example
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_replace
It allows you to load the new URL in the box on the right of the page.
In my case, i want a javascript that will replace the whole page, and not only in the small box on the right.
I hope i was clear enough.
It sounds like you've got code in an <iframe>. If so, you can reload the whole browser window/tab with
window.top.location.replace("http://gmail.com");

Update window hash (at url)

So I have this js code for an image gallery:
(this.settings.update_window_hash) {
var thumb_link = this.images[this.current_index].thumb_link;
if (thumb_link.attr("id")) {
window.location.hash = "#image-"+ thumb_link.attr("id"); //#url
} else {
window.location.hash = "#image-"+ this.current_index;
};
};
So as you've probably assumed this appends $image-(int) to the url. So if I have a
gallery with multiple images if the thir image is selected the url will look like this:
mysite.com/gallery.html#image-3
All good. But I dont really like this to be appended to the end of the url. So is there
any problem if I remove this part of the script entirely? So regardless the number of
image currently selected the url will look like this:
mysite.com/gallery.html
I've tested it and it works okay. But I'm not very experienced with javascript and I want
to make sure I'm not making a mistake. So
IS IT OKAY IF I REMOVE THIS SCRIPT ENTIRELY? WILL IT CAUSE ANY PROBLEMS?
HUGE THANKS.
Hashes at the end of the URL are optional and not required so YES, you can remove that script if you want (I'm not sure what problem you're trying to solve by removing it). In general, you get more useful answers if you tell us what problem you're trying to solve rather than what solution you're trying to use.
Hashes are used when you want the URL of the page to direct the viewer to some subcontent on that page. If you remove them, your page will still work just fine, but the URL of the page will not reflect which image is displaying. So, if the viewer saves that URL and comes back to it or links to it or anything that keeps a reference to the URL, it will go to the generic version of the page, not the onethat shows a specific image. Whether that is OK is totally up to you and how your page works.
Just use:
location.replace(location.href + "#myhash");
The location.replace method overwrites the current step in browser history. For an example of this in action see http://prettydiff.com/slideshow/
The stuff after the octothorpe normally represents a "name" or "id" from the web page. You can have an anchor tag (<a name='thevalue'>) and the browser will interpret the text after the octothorpe (http://example.com#thevalue) by scrolling to the associated section on the page.
Unless the page has special JavaScript to behave differently. In your case, it depends upon the full functionality of the web page you're writing. If you have smoke tests/unit test/use case tests/other QE tests, you should execute those to ensure that your changes don't break anything.
See http://www.w3schools.com/html/html_links.asp for more description of the standard usage.

Link to different parts/tabs of a page

Have a look at http://keithloutit.com/#news
I have a similar site, with all the content on the same page.
I would like to know how to fetch the correct part of the url. In this case it would be "news". I suppose its some regexp used on document.location.href? Hope you get the idea, otherwise ill try to elaborate. Thanks
The javascript on the page has to get the hash from the URL:
window.location.hash
and then activate the currect tab.
Note: if you're merely linking to a part of your page that is not part of a tabular system, you don't need javascript. The page will automatically scroll down to the element with that ID.

Categories