Question

javascript noob trying to figure something out. I saw a script located here:

Using jQuery to open all external links in a new window

in which urls on a page are checked to see if they match the current page url. If not, this particular script would open them in a new window. I would like to use the same test on urls but if they are external I would like ?iframe to be appended to each url, a la fancybox syntax. My noob script is:

$(document).ready(function() {
    $('a[@href^="http://"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).append('?iframe')
});

which I believe is incorrect. Any assistance? Thanks

Answer 1

You have to change the href attribute using attr, not append new child elements:

$('a[href^="http://"]').filter(function() { // no @ before the attribute name
    return this.hostname && this.hostname !== location.hostname;
}).attr('href', function(i, value) {
    // takes care of URLs with parameters
    return value + (value.indexOf('?') > 0 ? '&' : '?') + 'iframe';
});

Note that hostname is only available in HTML5. So in browsers not supporting HTML 5, the filter would discard every element (Update: Given that the question you linked to is from 2009, it seems browsers implemented hostname but it was not part of any specification). You can change it to:

var hostname = new RegExp("^http://" + location.hostname);

$('a[href^="http://"]').filter(function() {
    return !hostname.test(this.href);
}).attr('href', function(i, value) {
    return value + (value.indexOf('?') > 0 ? '&' : '?') + 'iframe';
});

And if you also want to convert links to https websites, ditch the attribute selector and change the regular expression:

var hostname = new RegExp("^https?://" + location.hostname);

$('a').filter(function() {...

---

Update:

Specifically for fancybox, according to the documentation, it should work this way. However, you are right, you could just add the iframe class:

 $('a').filter(function() {...}).addClass('iframe');