window.print() and window.close() function Safari IOS closing window without waiting for print preview
Question
In Safari in IOS the print and close JavaScript function doesn't seem to work like the other browsers. If you call window.print() alone it seems to work. However, if you call the window.close() right after, it seems to close the window and print preview although the print preview window is still open it doesn't wait for print preview to be done or cancelled to close the window and it just closes the window open immediately.
I created a button for printing a table. It opens the table in a new window and it open the print function and it waits a little bit to give some time for the browser to open the page and render the table. After print is done it supposed to close the window.
TIP: If you have a Mac and Xcode you can open the IPhone Simulator and access the localhost using python by starting up a server python -m SimpleHTTPServer 8000 . To access the simulator open Xcode then Xcode > Open Developer Tools > Simulator
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table class="table">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<button onclick="myPrintFunction()">Click me</button>
<script>
function myPrintFunction() {
let divToPrint = document.getElementsByClassName("table")[0];
if (typeof divToPrint !== 'undefined') {
let newWin = window.open();
newWin.document.write('<h1>PRINT FRIENDLY</h1>');
newWin.document.write(divToPrint.outerHTML);
newWin.document.close();
newWin.focus();
setTimeout(()=>{
newWin.print();
newWin.close();
}, 1000);
} else {
alert('NO EVENTS TO PRINT!');
}
}
</script>
</body>
</html>
1 answers
solution1
0 2020-07-08 16:21:42
I avoided write() because it deleted the DOM. Then I added both a print and a close button. To avoid these to be rendered I made them disappear and reappear after 10 seconds.
// detect Safari
if (navigator.userAgent.indexOf("Safari") !== -1) {
// make print button
const print_button = document.createElement('button');
const print_button_text = document.createTextNode("Print");
print_button.appendChild(print_button_text);
print_button.addEventListener(
"click",
function() {
// hide the buttons before printing
print_button.style.display = 'none';
close_button.style.display = 'none';
newWindow.print();
// delay reappearing of the buttons to prevent them from showing on the print
setTimeout(() => {
print_button.style.display = 'block';
close_button.style.display = 'block';
}, 10000);
},
false
);
// make close button
const close_button = document.createElement('button');
const close_button_text = document.createTextNode('Close');
close_button.appendChild(close_button_text);
close_button.addEventListener(
"click",
function() {
newWindow.close();
},
false
);
newWindow.document.body.appendChild(print_button);
newWindow.document.body.appendChild(close_button);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.