0

My API generates dynamic HTML document and dumps it into a popup window like so:

var popup = window.open('', "_blank", 'toolbar=0,location=0,menubar=1,scrollbars=1');
    popup.document.write(result);

After the document is reviewed by a user, they can print it calling

window.print();

Chrome handles it without any problems, but Firefox shows a Printer error:

"Cannot print this document yet, it is still being loaded"

Printer window opens only if I hit Ctrl+R.

It appears that $(document).ready() never happens in firefox and it keeps waiting for something to load.

Status bar in popup says Read fonts.gstatic.com

Here's a brief content of a document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Orbitron|Jura|Prompt" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<title>Invoice #15001</title>

<style>
...
</style>
</head>
<body>
<div id="invoice_body" >
...
</div><!-- Invoice body -->
</body>
</html>

I have a feeling it has something to do with Google fonts. Any help is appreciated

4

2 回答 2

1

When you pass "" as the URL to window.open, Firefox loads 'about:blank' at which point script security is likely preventing you from pulling in external resources via http or https ...

I am able to reproduce your problem and have it popup with the same error when I try to print-- I was able to get it working by using a data url when calling window.open ...

Based on your example, result is a string containing the HTML for the popup, so you would call window.open like this, and no longer use document.write for anything:

var popup = window.open("data:text/html;charset=utf-8,"+result, "printPopup", "toolbar=0,location=0,menubar=0,scrollbars=1");

I tested this with result being a string containing:

<html><head>
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Tangerine">
<style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style>
<title>Test</title></head>
<body>
<div>Testing testing</div>
<div><a href="javascript:window.print()">Print</a></div>
</body>
</html>

And clicking the print link worked as expected...

于 2017-06-20T07:04:26.693 回答
0

I had to go an extra mile, but:

I added server side code that would save a html file and pass a link to that file instead of html content:

ob_start();
include('ezts_invoice_template.php');
$dom = ob_get_clean();
$ezts_file_path = EZTS_PLUGIN_PATH.'kernel/tmp/'.session_id().'_tmp.html';
$ezts_file = fopen($ezts_file_path, 'w+');
$result = fwrite($ezts_file, $dom);
fclose($ezts_file);
print_r('{"result":"success", "file":"'.plugin_dir_url(__FILE__).'tmp/'.session_id().'_tmp.html"}');

in JS I open a popup by a link passed from PHP:

var popup = window.open(result.file, "_blank", 'toolbar=0,location=0,menubar=0,scrollbars=1');

and, finally, in template file I added event listener to request deletion of temporary file when the window is closed

window.addEventListener('beforeunload', function(event) {

    window.opener.eztsApiRequest('deleteTempFile', 
                                 '', 
                                 function(result, status){ console.log(result); });

}, false);

It's not as easy, but it works great.

于 2017-06-30T21:13:28.227 回答