Open links in new window with toolbar at the top - like reddit.com toolbar

Question

So I want to be able to use jquery or similar to force all external links to be

a. Opened in a new window (I think I have this covered From Here )

$(document).ready(function() {
    $('a[href^="http://"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).attr('target', '_blank');  
});

b. Opened with a custom toolbar (iframe?) at the top (like the reddit toolbar imgur.com/76YCS.jpg )

Answer 1

In terms of implementation you can't actually link out to an external site and add a toolbar.

Reddit achieve this by rewriting their external links to an internal link with a hash appended. The hash is stored in their database and used as an identifier. When a link is visited a frameset is loaded up with the toolbar in one frame and the corresponding external URL for that hash is loaded into the main frame.

If you look on your screenshot you can see the URL is reddit.com/tb/bk40q

Really this isn't a problem best suited to be handled on the client-side.

Answer 2

I've managed to do this entirely using Jquery, Html and Css

First You apply the toolbar to all the links except external in your script ie: global.js

$("a[href^='http:']").not("[href*='www.YOURDOMAIN.com']").each(function(){ 
    var tempurl = 'http://www.YOURDOMAIN.com/thebar/thebar.html?iframe=';
    var $this = $(this);
   // We grab the current href here, and then combine it with the bar url
    var currenturl = this.getAttribute("href");
    var href = tempurl + currenturl;
    $this.attr('href', href ); 
});

All the code for the iframe is available online if required I can post here. (it is just a lot)