I have some Javascript that is opening a blank window, assigning it with a stylesheet and then writing some text to it. This is all working fine except that the content is not having the styles applied to it.
The code looks like this:
var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');
var style = newWindow.document.createElement('link');
style.type = "text/css";
style.rel = "stylesheet";
style.href = "styles/style.css";
newWindow.document.getElementsByTagName("head")[0].appendChild(style);
newWindow.document.body.innerHTML="<p class='verystylish'>Hello world!</p>";
If I use the Firefox Web Developer tools to view the generated source, save that as an html file and then open the html file manually, it applies the styles correctly, so it looks as though I need to be doing something to force the browser to apply the styles or re-render the page somehow. Any suggestions?
Edited to add, the generated source looks like this:
<html>
<head>
<title></title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<head>
<body>
<p class='verystylish'>Hello world!</p>
</body>
</html>
The problem being that no style whatsoever is assigned to the paragraph. But opening a file with the same source code renders correctly.
I have some Javascript that is opening a blank window, assigning it with a stylesheet and then writing some text to it. This is all working fine except that the content is not having the styles applied to it.
The code looks like this:
var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');
var style = newWindow.document.createElement('link');
style.type = "text/css";
style.rel = "stylesheet";
style.href = "styles/style.css";
newWindow.document.getElementsByTagName("head")[0].appendChild(style);
newWindow.document.body.innerHTML="<p class='verystylish'>Hello world!</p>";
If I use the Firefox Web Developer tools to view the generated source, save that as an html file and then open the html file manually, it applies the styles correctly, so it looks as though I need to be doing something to force the browser to apply the styles or re-render the page somehow. Any suggestions?
Edited to add, the generated source looks like this:
<html>
<head>
<title></title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<head>
<body>
<p class='verystylish'>Hello world!</p>
</body>
</html>
The problem being that no style whatsoever is assigned to the paragraph. But opening a file with the same source code renders correctly.
Share Improve this question edited Mar 17, 2009 at 14:55 glenatron asked Mar 17, 2009 at 12:58 glenatronglenatron 11.4k14 gold badges67 silver badges121 bronze badges 4- Interesting, IE7 renders HTML in new window correctly. – Alexander Prokofyev Commented Mar 17, 2009 at 14:13
- Thank you, that is interesting. It may solve the immediate problem for me as that's my target browser for this project - it's just easier to develop in Firefox even for IE. – glenatron Commented Mar 17, 2009 at 14:26
- Have you tried in different browsers as well? Is that generated code from Firefox Web Developer window or inspecting the source of the new page? – Seb Commented Mar 17, 2009 at 14:26
- Generated source from the new page. Although I notice that I have made a hash-up of documenting it and left a "/" where there shouldn't be one. – glenatron Commented Mar 17, 2009 at 14:55
3 Answers
Reset to default 6A 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/TR/html4/strict.dtd">'+
'<html><head>'+
' <link rel="stylesheet" href="styles/style.css">'+
'</head><body>'+
'</body></html>'+
);
newWindow.document.close();
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.
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?
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744720890a4589901.html
评论列表（0条）