Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot close a script-opened window in Firefox

This JS works okay on Chrome but not on Firefox, new window cannot be closed from JS:

function print(){
    var canvas = document.getElementById("canvas");
    var printWindow = window.open();
    var printHtml = "<!DOCTYPE html>"
        + "<html lang='en'>"
        + "<meta charset='UTF-8'>"
        + "<title>Printing the canvas</title>"
        + "<style type='text/css' media='print'>"
        + "@page{size:auto; margin:0mm auto 0mm auto;} h1{text-align:center; font:10mm Arial, sans-serif;}"
        + "</style>"
        + "<script>"
        + "window.onafterprint = function(){ window.close(); };"
        + "</script>"
        + "<body>"
        + "<br><h1>My canvas</h1>"
        + "<br><img onload='print();' src='"+canvas.toDataURL()+"'/>"
        + "</body>"
        + "</html>";
    printWindow.document.write(printHtml);
}

Firefox supposedly allows window.close() on windows which were opened by JS but this does not work for me.

Tags:

2

Answers


  1. 0

    you have to use Window.postMessage() event like this:

    // main window
const w = window.open('MY_WINDOW_URL')
w.addEventListener('message', (e) => {
    if (e.data === 'timeToClose') w.close();
})

// window
function print(){
var canvas = document.getElementById("canvas");
var printWindow = window.open();
var printHtml = "<!DOCTYPE html>"
    + "<html lang='en'>"
    + "<meta charset='UTF-8'>"
    + "<title>Printing the canvas</title>"
    + "<style type='text/css' media='print'>"
    + "@page{size:auto; margin:0mm auto 0mm auto;} h1{text-align:center; font:10mm Arial, sans-serif;}"
    + "</style>"
    + "<script>"
    + "window.onafterprint = function(){ window.postMessage('timeToClose'); };"
    + "</script>"
    + "<body>"
    + "<br><h1>My canvas</h1>"
    + "<br><img onload='print();' src='"+canvas.toDataURL()+"'/>"
    + "</body>"
    + "</html>";
printWindow.document.write(printHtml);

    }

    Login or Signup to reply.
  2. 0

    With a small variation it works in firefox

    <!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8">
      <title>ΤΙΤΛΟΣ</title>
   </head>

   <body style="background-color: burlywood;">
      <div>
         <canvas id="canvas" width="100" height="100" style="border:1px solid #000000;"></canvas>
      </div>
      <button onclick="myPrint()">open window</button>
      <script>
         const canvas = document.querySelector('canvas');
         const ctx = canvas.getContext('2d');
         ctx.fillStyle = 'green';
         ctx.fillRect(0, 0, 100, 100);

          function myPrint() {
            var canvas = document.getElementById("canvas")
            var printWindow = window.open()
            var printHtml = "<!DOCTYPE html>"
               + "<html lang='en'>"
               + "<meta charset='UTF-8'>"
               + "<title>Printing the canvas</title>"
               + "<style type='text/css' media='print'>"
               + "@page{size:auto; margin:0mm auto 0mm auto;} h1{text-align:center; font:10mm Arial, sans-serif;}"
               + "</style>"
               + "<script>"
               + "function aaa(){setTimeout(()=>{document.getElementById('closer').click()},1)}"
               + "</" + "script>"
               + "<body onafterprint = 'aaa()'>"
               + "<br><h1>My canvas</h1>"
               + "<br><img onload='print()'; src='" + canvas.toDataURL()+"'/>"
               + "<button id='closer' onclick='window.close()' hidden></button>"
               + "</body>"
               + "</html>" 
         printWindow.document.write(printHtml);
      }
   </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search