jQuery: cargar dinámicamente diferentes links en un iframe

Un ejemplo de como cargar dinámicamente diferentes urls en un iframe usando jQuery. Voy a utilizar el atributo «rel» de cada item de una lista para almacenar la url que queremos cargar, a continuación ya inserto la url en el iframe utilizando «attr», y para refrescar el contenido del iframe, como siempre la función reload().

$(document).ready(function() {
    $('li').click(function () {
        var url = $(this).attr('rel');
        $('#iframe').attr('src', url);
        $('#iframe').reload();
    });
});

Y el html de la lista y iframe:

<ul>
    <li rel="http://bufa.es">Link 1</li>
    <li rel="http://www.wikipedia.com">Link 2</li>
    <li rel="http://www.awwwards.com">Link 3</li>
</ul>

<iframe src="http://www.google.com" width="100%" height="100%" frameborder="0" scrolling="yes" id="iframe"></iframe>