modificar - Añade una hoja de estilo a un iframe con jQuery
jquery change iframe (5)
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());
}
Podemos insertar la etiqueta de estilo en iframe.
<style type="text/css" id="cssID">
.className
{
background-color: red;
}
</style>
<iframe id="iFrameID"></iframe>
<script type="text/javascript">
$(function () {
$("#iFrameID").contents().find("head")[0].appendChild(cssID);
//Or $("#iFrameID").contents().find("head")[0].appendChild($(''#cssID'')[0]);
});
</script>
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
Si bien puedes interactuar con document.heets de un iframe, la forma confiable de la vieja escuela es tener primero la hoja de estilos (escribiendo iframe-src para apuntar a un documento vacío con la hoja de estilo deseada), o ponla en su lugar con document.write() . Por ejemplo:
<body>
<iframe></iframe>
<script type="text/javascript">
var d= frames[0].document;
d.open();
d.write(
''<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">''+
''<html><head><style type="text/css">''+
''body { font-size: 200%; }''+
''<//style><//head><body><//body><//html>''
);
d.close();
d.body.innerHTML= ''<em>Hello</em>'';
</script>
</body>
(Esto también establecerá el documento de iframe en el modo de estándares, suponiendo que eso es lo que desea).
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(''<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />'');
});
Seguir:
HTML
<iframe id="message" name="message" />
jQuery
setTimeout(function() {
var $head = $("#message").contents().find("head");
$head.append($("<link/>",
{ rel: "stylesheet", href: url, type: "text/css" }
));
}, 1);