Automatic external link interstitials using JavaScript and Behavior.js

Working for a health information website has some disadvantages – you must take greater than normal care to ensure user privacy. One of the requirements is to pop up an interstitial message before going to another website, because the new website might have different terms and conditions.

With the new blogs at WebMD, we’re tying into social networking sites like Technorati and del.icio.us, plus linking to other blogs, so we have a lot of external links.

Previously this meant manually modifying each link so it passes through a special page on WebMD then redirects to the target URL. But I thought that was a lot of work, plus very error prone and hard to maintain.

Instead I used Ben Nolan’s behavior.js, a wonderful library for attaching behaviors to page elements, to add an onclick behavior to every external link. I used regular expressions to determine which links should be considered “internal” links that shouldn’t be modified.

You can go to a the WebMD heart disease blog and click a Technorati link to check it out.

Here’s the code: behavior-external-linkify.js

Update:

Julien writes:

I tried the scenario you listed in your blog (go to WebMD and then
click a Technorati link) in Firefox 1.5 and it didn’t work: the popup
got blocked…

Yes, I noticed that as well; unfortunately the actual part of the
process that displays the interstitial is not under my control – all I
can do is redirect the user to the WebMD page that does the rest.

I need to notify them about this difficulty – they could probably
change that page to display an alert box if the popup did not open.
Alternatively, if you didn’t care about redirecting through another
page you could modify my JavaScript such that it displays an alert
instead of redirecting the page.

Update 2006-03-09: Here is another implementation using Yahoo!’s libraries instead of Behavior.js

3 Responses to “Automatic external link interstitials using JavaScript and Behavior.js”

  1. [...] Inspired by Automatic external link interstitials using JavaScript and Behavior.js (via Ajaxian), I decided to try to implement the same idea using Yahoo! User Interface Library. (No, I don’t have new ideas, just sample code… read on!) Here’s the meat of the code: [...]

  2. Phil says:

    Thanks for the linkage, and the inspiration!

  3. Phil says:

    Word Press changed my link slugs from what they were on the Movabletype version. So I updated them and broke this link. Sorry! I’ve added a cheap redirect.

Leave a Reply