Añade una hoja de estilo a un iframe con jQuery

Estoy creando un editor de HTML, similar a este en el que estoy escribiendo ahora con el resultado a continuación. Estoy usando un iframe y estoy volcando $ htmlTextBox.val () en el cuerpo del iframe.

Intento crear una hoja de estilo dentro del iframe para que se vea tan bien como funcione.

¡Gracias por adelantado!

$htmlTextBox.keyup(function(){ SetPreview(); }); function SetPreview() { var doc = $preview[0].contentWindow.document; var $body = $("body", doc); $body.html($htmlTextBox.val()); } 

Aunque puede interactuar con document.heets de un iframe, la forma confiable de la vieja escuela es tener primero la hoja de estilo (escribiendo iframe-src para apuntar a un documento vacío con la hoja de estilo deseada) o ponerla en su lugar con document.write() . Por ejemplo:

     

(Esto también establecerá el documento de iframe en el modo de estándares, suponiendo que eso es lo que desea).

Seguir:

HTML

  

jQuery

 setTimeout(function() { var $head = $("#message").contents().find("head"); $head.append($("", { rel: "stylesheet", href: url, type: "text/css" } )); }, 1); 

Podemos insertar la etiqueta de estilo en iframe.

    

Sacó este código de la fuente jHtmlArea. Lo gracioso es que la función estaba allí y no me di cuenta. Me encontré con esta pregunta SO cuando estaba tratando de encontrar la manera de implementarla. 🙂

Esto no es realmente “jQuery”, pero funciona. Supongo que algo con append no funciona con iframe, así que lo hicieron en la vieja escuela. La respuesta de Bobince también se ve bien, ¿y podría ser más confiable? Hasta ahora, esto parece funcionar bien.

 var e = edit.createElement('link'); e.rel = 'stylesheet'; e.type = 'text/css'; e.href = options.css; this.iframe[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(e); 

EDITAR : Creo que la razón por la que esto funciona es si es sameDomain (incluida la creación de iframe en js) De lo contrario, los bloques de seguridad del navegador habituales evitarán que manipule iframe dom.

Consulte Cómo aplicar CSS a iFrame

Suponiendo que está en el mismo dominio y no tiene que ver con la seguridad entre dominios, querrá verificar si el iFrame está cargado, ¡NO SOLO EL IFRAME, PERO EL DOCUMENTO DENTRO! (Esto me colgó por un tiempo mientras trataba de usar .load() )

Luego, usando jquery, acceda a los contenidos, acceda al encabezado y agregue su hoja de estilo al encabezado.

  $(document.getElementById('yourIframeID').contentWindow.document).ready(function() { $('yourIframeID').contents().find('head').append(''); }); 
    Intereting Posts