I’m working on a browser-based WYSIWYG web page editor using the design mode of Internet Explorer 5+.
I figured out how to use a prompt to insert external stylesheets into the HTML file to be saved. But I want to find a way to save everything between <html> and </html> in documents with stylesheets already in the <head> section. These CSS template pages will be loaded into the iframe named “iView.”
Here’s the incomplete save script I have so far:
function saveFrame() {
var ss =
var html = iView.document.body.innerHTML;
var html_txt = “<html><head><style>” + ss + “</style>n” + “</head>n”;
html_txt += “<body>” + html + “n</body></html>”;
nwwin = window.open(“”,””);
nwwin.document.open();
nwwin.document.write(html_txt);
nwwin.document.close();
nwwin.document.execCommand(“SaveAs”);
}
As you see, I need to define ss in a way that will read the stylesheet contained in the HTML document loaded in the iframe and then pass this value to var html_txt before the file is saved.
I stumbled across the below script whose purpose is to read a page’s stylesheet. How can I modify it to do what I want? I’ve tried several ways, but none worked. Unmodified, the script returns a saved file that obviously is missing an object: <html><head><style>[object]</style></head>
function getComputedStyle( id, p ) {
var e = document.getElementById( id ), v;
if( !e ) return;
if( document.defaultView &&
document.defaultView.getComputedStyle ) {
var s = document.defaultView.getComputedStyle( e, null );
if( s && s.getPropertyValue ) v = s.getPropertyValue( p );
} else if( e.currentStyle &&
( ‘undefined’ != typeof e.currentStyle[ p ])) {
v = e.currentStyle[ p ];
}
return v;
}