Everyone hates landing on a 404 page when they click on a link. On a site with many different, off-site links (like this one
), it’s easy for links to become inactive over time. Here’s some Ajax (Javascript) I wrote to automatically check links on a page when a user rolls over them to make sure they’re still valid.
When the JS file is run, it adds an onload event to the page that runs through all the links on the page, and adds an onmouseover event if one isn’t already assigned. When a visitor moves their mouse over a link, a call is made to the server that requests the link’s URL, and a positive condition is returned if the URL is valid (http response of "200 OK"). An icon (check mark or trash can — I could use some better, small icons if anyone likes playing in Photoshop
) is then displayed for the visitor in the anchor tag.
This effect would get really annoying on a site with a lot of image links since it would jam the icons into your design which could bump design elements around. It would be easy enough to change to simply change the images if they are valid/invalid e.g. fade them, tint them, give them a border, etc.
To roll this out on a large site, you would definitely want to change it to cache the URL status. For example, if 100 people all roll-over a link at the same time, there’s no sense checking that link over-and-over again.
Also (and this is a big one), if you have a Members-only section of your site or something, the server may not receive "200 OK"’s from the server for the password protected links. Another thing, if a web-developer was stupid enough to pass commands in the query string without checking for session (e.g. ?deleteid=666) then the script is going to go out and hit that link and run the command.
I’ve installed the script site-wide for now so please enjoy rolling your mouse over all my links and pinging my isp to hell
Cheers!
Example (installed site-wide for now):
Download:
- Put this JS file on your page UPDATED: July 10, 2005 @ 2pm EST Make sure you change the paths in this file to point to the PHP file below
- Put this PHP file on your server
Cool script, by the way if you point to "Entries (RSS)" link in bottom page it won’t work. "feed" is not a standard protocol registered by browsers. Just and str_replace to fix it
Good point. Since that could be a problem with a lot of those special transfer protocols, I added a check that the URL begins with http:// or https://. Thanks for the suggestion
Since I am also worried about commands on the query string, I removed checking on any links with a query string.
I also added a 500 millisecond delay to displaying the "working link" icon so it wouldn’t interfer with people clicking it.
Another way to do this would be to check a link only when a user clicks it and display a confirmation prompt if the link is invalid e.g. "Sorry, this link no longer appears to be active. Would you still like to go to it? OK/Cancel". That might be less intrusive for the user. For the time being, I’ve added that functionality only to the active script on this site. Try it out on this link
I’m getting a strange behaviour when I click in the “text” of your comment “https://.” is considered as URL ? (try it with firefox) I think its better to parse url in server side, easily done with preg_match, but dunno about JS…
Do you have a Firefox extension or Greasemonkey that automatically converts text to links? “https://” isn’t a link over here
hi;
nice script ;
I’m new to this. can you advise how I can check only the links that i can specify on the page.
thanks
happy thanks giving
jeff