ansaurus

Question

Assigning a stylesheet in JavaScript creates good html, but does not show the styles.

Answer 1

+1 A:

What do you mean by "it applies the styles correctly"? Are you talking about the class="verystylish"? If that's it, then it doesn't mean styles are getting applied at all, but that the new paragraph element has that class.

You're not writing anything to the window except for that <P>. Don't you have to write the whole code of the page, including <HTML>, <HEAD> and <BODY> tags?

Seb 2009-03-17 13:15:31

Hopefully the edit clarifies. On the generated page the style is not applied, the same source code as an html document shows the style correctly. Window.open with a blank filename ( in firefox at least ) opens a window containing an empty html document.

glenatron 2009-03-17 14:25:08

Answer 2

+1 A:

Firefox doesn't set up the base URL correctly, so the relative link /styles/styles.css isn't pointing anywhere (or at least, that's the impression I got by generating an < a> element into the new window and then asking the respective browsers to copy the link location into the clipboard).

Which would imply it might work if you load an empty html document (rather than about:blank) that's got the correct base URL to work from. I've had to do something similar in the past (keep a copy of about:blank available), because I was getting a warning about mixed secure/unsecured items being shown.

Damien_The_Unbeliever 2009-03-17 14:52:46

Answer 3

+2 A:

A new window opens by default with the URL ‘about:blank’. Relative URL references won't work for this reason. To change the location of the window to match the original document, call:

newWindow.document.open();

You should then write the skeleton of the document you want to the window. You can include the stylesheet now if you want, as document.write is a more reliable way of adding a stylesheet across older browsers than DOM methods. This method also allows you to write a DOCTYPE so you don't unexpectedly end up in Quirks Mode.

newWindow.document.write(
    '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;'+
    '<html><head>'+
    '  <link rel="stylesheet" href="styles/style.css">'+
    '</head><body>'+
    '</body></html>'+
);
newWindow.document.close();

bobince 2009-03-18 04:49:43

ansaurus

tags:

views:

answers:

Assigning a stylesheet in JavaScript creates good html, but does not show the styles.

related questions