Trying to set the body of a document opened with window.open as follows:
print-preview.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title></title>
<style type="text/css" media="all">
@import url("/css/reports.css");
</style>
<style type="text/css" media="print">
@import url("/css/print.css");
</style>
</head>
<body></body>
</html>
jquery:
$("#print-preview").click( function() {
var printPreviewWin = window.open("print-preview.php",
"printPreviewWin", "location=0,status=0,scrollbars=1");
$('[name="print-this-listing"]:checked').parents("div.listing").clone().each(function(){
$(printPreviewWin.document.body).append($(this).html());
});
});
In IE7, it works fine. In FireFox, it flashes for a brief moment the
content, but then resorts to displaying the empty body tag that's in
the static document. If I put something like <h1>foo</h1> in the
<body> of the static document, with IE, my dynamic javascript content
is appended after it. With FireFox, only <h1>foo</h1> is displayed.
When I create a new empty window, FireFox displays the dynamic
javascript content is displayed without issue.
What I want to be able to do is pull up a real document to save me
from having to write all the head markup (style, title, etc.) in the
javascript but also to use this static document for graceful
degradation.
Any ideas?
