accessing head section

starrwriter · Jul 1, 2004

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>" + '' + "</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?

BillyRayPreachersSon · Jul 2, 2004

The first line of both of your functions doesn't do anything practical, so can probably be removed (in both cases, you are never using the "html" variable).

You also are not using the "form" variable passed into the second function, and indeed haven't actually closed the second function with a closing brace ( } ).

You are writing 2 "head" sections, which could confuse the browser - surely you should only ever have 1? Then again, if you are using document.write after the page has loaded, the second one will overwrite the first, so maybe you should do all of this with one insertion, specifying the following things each time:

Code:

<html><head></head><body></body></html>

And try using "document.open();" before the write, and "document.close();" after the write.

Hope this helps,
Dan

starrwriter · Jul 2, 2004

...if you are using document.write after the page has loaded, the second one will overwrite the first, so maybe you should do all of this with one insertion, specifying the following things each time:
<html><head></head><body></body></html>"

I'm afraid you misunderstood the problem. The user of a WYSIWYG editor can't be expected to insert hover links, rollover buttons, select menus and anything else that requires head data all at once. He has to be free to make individual insertions for these features at different statges in designing his web page.

And if my code document.writes <html><head></head><body></body></html> for the first insertion, all other insertions will end up in the body section where they don't belong.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

accessing head section

starrwriter

Programmer

BillyRayPreachersSon

Programmer

starrwriter

Programmer

Similar threads

Part and Inventory Search

Sponsor