Change all external links using jQuery - javascript

I want to change all external links on my blog (blogspot here, that's why I'm looking for jQuery code) without changing the posting of my blog because I need a lot of work if I do that.
For example, my website is example.com.
I want to change all external links to
http://example.com/p/go.html?url=http://externallink.com
without need for any changes on my blog post. I don't have any idea to start with.
SOLVED: https://gist.github.com/2342509 Thanks everyone :D I just need to change it a bit.

In jQuery you can try:
// DOM ready
$(function(){
$('a[target="_blank"]').prop('href', 'http://example.com/p/go.html?url=http://externallink.com');
});
Ofcourse this will only work if you have set the target="_blank" property/attribute in HTML and if you want all links to open the same url. This idea derives from the fact you want to have external links open automatically in a different tab/window.
If this is not the required functionality, you can use a custom data- attribute in a similar way. Only difference is you will need to loop each link, and get the data from it.
// DOM ready
$(function(){
$('a[data-href]').each(function(){
var anc = $(this),
href = anc.prop('href'),
dataHref = anc.data('href');
anc.prop('href', href + '?url=' + dataHref);
});
});
HTML example:
external link
And now you will probably need to add more information if that is still not what you want.

Going off of #Tim Vermaelan's answer, you could try this, which will check for every link that doesn't start with your website's URL without relying on it being target="_blank":
$('a:not([href^="http://yoursite.com"])').prop('href', 'http://example.com/p/go.html?url=http://externallink.com');

Related

How to recursively get all the links present in a website using Javascript?

I'm looking for the way to recursively find all the links present on any given website. I know how to do this in java but I don't know how it can be done using javascript.
Consider this image represents a website directory and if we provide 'www.abc.com' ,then it should return following output.
www.abc.com\images
www.abc.com\files
www.abc.com\images\a.jpg
www.abc.com\images\b.jpg
www.abc.com\files\aa.txt
www.abc.com\files\bb.txt
Since the question is tagged jQuery, I'll use that. Simply target the a tags.
var linksList = [];
function addLink(url){
if(url!= "" && linksList.indexOf(url) == -1){
links.list.push(url);
scrapePage(url);
}
}
function scrapePage(url){
$.get(url,function(html){
var $iframe = $('body').append('iframe');
$iframe.contents().find("body").html(html);
$iframe.contents().find("body a").each(function(index,link){
addLink(link.href);
});
$iframe.remove();
});
}
$("body a").each(function(index,link){
addLink(link.href);
});
Pretty simple, a function to add links in our list, another to follow the links we add. I decided to put the content of the scraped page inside an iframe to keep everything restrained...
You'll want to add your logic to make sure it takes only links that are from the domain. You might need to play with the URL as it will not be absolute (but considered it is in my code). And so on.
In js getElementsByTagName("a")
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
In jquery $("a")
I think you cannot get all the links of a particular website. But you can get all the link of particular page like below :-
var allLinks = document.getElementsByTagName("a");
Hope it helps. It would be great if you elaborate your issue more.

Can I change the URL without updating the page?

This may seem like a dumb question. But I have no idea if it can be done. So before I start the process of making a portfolio site, I would like some pointers. Otherwise, I will just go with another design.
My question:
When using the ascencor.js plugin, everything on my site is in one file. I will therefor never go to a new url, like /contact or /about.
But then I wondered, what about google?
All of my content would be put inside different different classes, but in the same file:
<div class="floor floor-1">
<span class="text">Floor 1</span>
</div>
<div class="floor floor-2">
<span class="text">Floor 2</span>
</div>
Check the example here: http://rplambech.dk/ascencor/
So yeah, with this method, I will never change the url, so I can therefor only index one page.
Is there a way that I can change the URL without updating the site? And will I be able to go to http://rplambech.dk/ascencor/floor5 for example?
In case it's not possible, can I then at least overwrite the title of the page, each time I click to a new "page". With some PhP for example.
Or should I just go with a completely different approach? :)
From the context of your question, and its comments, you're looking for the term single-page-application.
There are many ways of doing this, some of them make use of the history object in order to support the browser's "back" and "forward" buttons.
I'd recommend you to do a search of the term "single page application" and in the meantime examine some (or all) of the following frameworks (they will ease your development and make your life easier instead of dealing with # and nasty low-level ajax calls:
backbone.js
angularJS
ember.js
It can be done using hash links, originally designed to jump to a certain div on the page are now often used to load dynamic pages on a single page
so you could link to http://rplambech.dk/ascencor/index.html#floor5 for example
and then have some javascript like
var loc = location.hash.split("#")[1];
then
if(loc == 'floor5'){
//execute goto floor 5 code
}
Using history.pushState with HTML5 as stated here.
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
URL:
<a href="#" id='click'>Click to change url to bar.html</a>
No you can't change the URL without going to the server.
JQuery does however have a cool page loader that will load a page.
How to put a whole html page in a div using jquery?
You cannot change the url "/ascencor" to "/ascensor/floor5" without refreshing the page.
But you can change to "/ascensor/#floor5" (added hash sign). I suggest you try out angularjs for more information.

obtain url paramethers from a page called with JQuery's load() function

I have seen this question before but I haven't found a working solution.
The question is quite easy.
If I call a page like this.
div.load('page?foo=bar');
I want to be able to retrieve foo in some way an use it in a javascript called by page. But I only manage to obtain the paramethers of the parents url.
I know I can declare variables in the parents javascript code but that is not my preffered way.
So I really hope someone has a solution to this problem.
♥ you guys
You could use something like this to parse the URI:
http://blog.stevenlevithan.com/archives/parseuri
Then you can access the parameters easily from the parent page:
// Set the link that we want to load/examine
var link = 'page?foo=bar';
// Load the link content (as per your code)
div.load(link);
// Grab whatever variables we want from the link
var uri = parseUri(link);
var foo = uri.queryKey.hasOwnProperty('foo') ? uri.queryKey.foo : false;
alert(foo);
EDIT:
As bfavaretto already commented, the content loaded in via AJAX is just a string. It's not a page that will be aware of its URI.
However, if you really want the loaded content to be able to access its URI, just make it available in the content itself. For example:
$('#my_div').load('page?foo=bar)
And in the content of "page?foo=bar":
<div class="container" data-page-uri="{{ insert uri here with php, ruby, whatever }}">
<!-- my page content -->
</div>
Now in your loaded content, you can determine the URI by finding the relevant div with the "data-page-uri" data attribute. Once you have the link, you said that you know how to grab the parameters from it...
Hope that helps.
I think you have two solutions. One, if page has a hidden div, with the data needed, the second one, probably the ajax response object has the caller url. You should study the response xhr object.

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

how to get variable's value from URL and pass to all the links on the whole site?

I am trying to get a variable from a URL,
for example if the users can link to this page: www.example.com?var1=blabla&var2=blabla
and there are many links on this site www.example.com.
What I want is no matter where my users click, they will always see the link appended with 2 variables they got from this link www.example.com?var1=blabla&var2=blabla
for example: if there is another link
<a href="www.example.com/page1.php"/>Go to page1</a>
on www.example.com?var1=blabla&var2=blabla, they will go to page www.example.com/page1.php?var1=blabla&var2=blabla.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
var links = $('a');
links.each(function(){
var curLink=$(this);
var href = curLink.attr('href');
var newhref = href +'?'+ hashes;
curLink.attr('href',newhref);
});
});
</script>
My question is: I can only make all the links on the same page append those 2 variable. If the users go to another page, it won't do the same thing, because there is no script on it... but I can't add same script on every pages...
And another question, I want to clear the things after question mark and append the new ones.. is that possible to do that?
Thanks!
Your code looks good to me. And from your question it appears that your problems lie outside this.
My question is: I can only make all the links on the same page append
those 2 variable. If the users go to another page, it won't do the
same thing, because there is no script on it... but I can't add same
script on every pages...
If you can't run your script on every page then you can't modify the url's. You will need to do it server side. If you can't do it server side then you are out of luck.
And another question, I want to clear the things after question mark
and append the new ones.. is that possible to do that?
Yes, that is certainly possible. To strip the querystring use the following code.
var strippedHREF = window.location.href.substring(0, window.location.href.indexOf('?'));

Categories

Resources