Menu
I'm creating an HTML editor, similar to this one I'm typing in right now with the output below. I'm using an iframe and dumping the $htmlTextBox.val() into the body of the iframe.
I'm trying to create a stylesheet inside the iframe so that it looks as good as it works.
Thanks in advance!
$htmlTextBox.keyup(function(){
SetPreview();
});
function SetPreview()
{
var doc = $preview[0].contentWindow.document;
var $body = $("body", doc);
$body.html($htmlTextBox.val());
}
966
Whilst you can interact with an iframe's document.styleSheets, the old-school reliable way is either to have the stylesheet there in the first place (by writing an iframe-src to point to an empty document with the desired stylesheet), or put it in place with document.write(). For example:
<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>
(This will also set the iframe document to Standards Mode, assuming that's what you want.)
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
