Javascript to append iframe to all external URLs

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

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');

Instead of append, which modifies the inner HTML of the element, modify the href attribute:

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

    elements.each(function(index, value) {
        $(this).attr('href', $(this).attr('href') + '?iframe');
    });
});

Your use of the append method is incorrect. The following code shows how to achieve what you require, plus it takes into account a couple of additional factors that you need to bear in mind, namely:

1) What about links that use https rather than http?
2) What about links that already contains querystring parameters? http://www.blah.com/?something=123 should be changed to http://www.blah.com/?something=123&iframe rather than http://www.blah.com/?something=123?iframe

$(function() {
    $('a[href^="http"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).each(function() {
        this.href += ((this.href.indexOf('?') >= 0) ? '&' : '?') + 'iframe';
    });
});