Javascript: Manipular DOM desde una página cargada dentro de un IFRAME

En alguna extraña ocasión nos podemos encontrar con la siguiente situación: necesitamos modificar el HTML de una página (en adelante Página 1) desde una página que se carga en un IFRAME (en adelante Página 2) de la Página 1.

Para lograr el éxito se utilizará window.parent.

Para rizar el rizo lo que insertaremos en la Página 1 será una capa con un IFRAME al clicar un enlace de la Página 2, y en ese IFRAME se abrirá la URL que contenga el href del enlace clicado (en adelante Página 3).

Este es el Javascript necesario, que irá en la Página 2 (necesita Jquery -enlace externo, en inglés-):

jQuery.noConflict();
jQuery(document).ready(function () {
 
 var sup1 = new Superior();
 sup1.inicia();
 
});

function Superior () {
 this.datos = {
  enlace: 'a.enlace',
  destino: '#contenedor'
 }
 
 this.inicia = function () {
  var that = this;
  jQuery(that.datos.enlace).click(function () {
   var ruta = jQuery(this).attr('href');
   jQuery(that.datos.destino, window.parent.document).append('<div id="insertado"><iframe src="'+ruta+'" frameborder="0"></iframe></div>');
   return false;
  });
 }
}

Se puede ver un ejemplo funcionando.