Append a stylesheet to an iframe with jQuery

Question

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 th

Answer 1

Pulled this code below from jHtmlArea source. Funny thing is, the feature was there and I didn't realize it. I came across this SO Question when I was trying to figure out how to implement it. :)

This isn't really "jQuery" but it works. I'm guesing something with append isn't working with iframe so they did it old school. Bobince's answer looks good too, and might be more reliable? So far, this seems to work ok.

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);

EDIT: I think the reason this works is if it is sameDomain (including creating iframe in js) Otherwise the usual browser security blocks will prevent you from manipulating iframe dom.

See How to apply CSS to iFrame