This may be difficult to understand unless you are familiar with the
design mode feature built into Internet Explorer 5.5+. I used this
feature to develop a browser-based WYSIWYG HTML editor for offline
use, but I have run into a serious problem that I can't solve.
innerHTML and outerHTML access the <body> section of the web page
under construction, but I was able to hack together some javascript to
access the <head> section for the user to insert CSS and scripts from
popup form-based code generators. The problem is I can only access the
<head> section twice. When a third insertion of script or CSS is
attempted, it is placed in the <body> section. Amazingly, this still
works for IE, but it's bad coding and I'm sure it doesn't work in
other browsers.
Here is the first two insertions that work:
function generatecss(){
var html = opener.iView.document.body.outerHTML;
var html_txt = "<html>" + "<head>" + "<style>" +
'<!--a:hover{'+thesheet+'}-->' + "</style>\n";
opener.iView.document.write(html_txt);
}
(iView is an iframe used as an editing window for the page under
construction, 'the sheet' is the form output for CSS hover links. Note
that I ended the insertion at </style> without closing the <head>
tag.)
function metaTag(form){
var html = opener.iView.document.outerHTML;
var html_txt = "<head>" + txt + "</head>" + "<body>" + "Page Content
Begins Here" + "</body>" + "</html>\n";
opener.iView.document.write(html_txt);
}
(txt is the form output for meta tags. Note that I had to add body
text and close the <body> and <html> tags. Otherwise, the iView focus
remains in the (invisible) head section and no content can be added to
the body section.)
After hover link properties and meta tags are added, scripts and CSS
that are directed to the head section in the same way end up in the
body section instead. Any ideas about how I could change the functions
so that any number of CSS and script insertions could be made to the
head section as the page is being designed? I have code generators for
rollover buttons, popup windows etc. that require data in the head.
