1

I have an HTML page from which I launch a pop-up window. On the pop-up, I want to process options like closing the pop-up when a cancel button is pressed but the browser can't find the Javascript function I'm defining inside the pop-up (ReferenceError: dismissPopup is not defined):

<html>
    <head>
    <script type="application/javascript">
    <!-- hide script from browser
    /* <![CDATA[ */
    function launch() {
      win = window.open("", "popup", "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=1400,height=550");

      if (!win) {
        alert("Unable to create pop-up window.  Are you using a pop-up blocker?");
        return;
      }

      html = "";
      html += "<html>\n";
      html += "<head>\n";
      html += "<script type=\"text/javascript\">\n";
      html += "  function dismissPopup() {\n";
      html += "    close();\n";
      html += "  }\n";
      html += "</script>\n";
      html += "</head>\n";
      html += "<body>\n";
      html += "<title>click me</title>\n";
      html += "<table class=\"buttons\">\n";
      html += "<tr>\n";
      html += "<td><button size=\"250\">Save</button\"/></td>\n";
      html += "<td><button size=\"250\" onclick=\"dismissPopup(); return false;\">Cancel</button></td>\n";
      html += "</tr>\n";
      html += "</table>\n";
      html += "</body>\n";
      html += "</html>";

      win.document.body.innerHTML = html;
    }
    /* ]]> */
    // end hiding -->
    </script>
    </head>
    <body>
    <p>
    <button onclick="launch()">Launch</button>
    </p>
    </body>
</html>

It seems a awkward to use innerHTML to specify Javascript but I don't know how else to specify it when I build the pop-up this way. The <script> section even even appears in the body section inside Firebug Inspector! That seems weird but the GUI rendering looks ok.

What am I doing wrong? Can anyone suggest a way to fix this?

Following the Script tag in Javascript string question and advice from Xufox, I tried to protect </script> and even added the magic to hide the script from the browser, but the function is still not found:

<html>
<head>
<script type="application/javascript">
<!-- hide script from browser
/* <![CDATA[ */
function launch() {
  win = window.open("", "popup", "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=1400,height=550");

  if (!win) {
    alert("Unable to create pop-up window.  Are you using a pop-up blocker?");
    return;
  }

  html = "";
  html += "<html>\n";
  html += "<head>\n";
  html += "<script type=\"text/javascript\">\n";
  html += "<" + "!" + "-" + "-" + " " + "h" + "i" + "d" + "e" + " " + "s" + "c" + "r" + "i" + "p" + "t" + " " + "f" + "r" + "o" + "m" + " " + "b" + "r" + "o" + "w" + "s" + "e" + "r" + "\n";
  html += "/" + "*" + " " + "<" + "!" + "[" + "C" + "D" + "A" + "T" + "A" + "[" + " " + "*" + "/" + "\n";
  html += "  function dismissPopup() {\n";
  html += "    close();\n";
  html += "  }\n";
  html += "/" + "*" + " " + "]" + "]" + ">" + " " + "*" + "/" + "\n";
  html += "/" + "/" + " " + "e" + "n" + "d" + " " + "h" + "i" + "d" + "i" + "n" + "g" + " " + "-" + "-" + ">" + "\n";
  html += "<\/script>\n";
  // html += "</" + "script>\n";
  html += "</head>\n";
  html += "<body>\n";
  html += "<title>click me</title>\n";
  html += "<table class=\"buttons\">\n";
  html += "<tr>\n";
  html += "<td><button size=\"250\">Save</button\"/></td>\n";
  html += "<td><button size=\"250\" onclick=\"dismissPopup(); return false;\">Cancel</button></td>\n";
  html += "</tr>\n";
  html += "</table>\n";
  html += "</body>\n";
  html += "</html>";

  alert(JSON.stringify(html));

  win.document.body.innerHTML = html;
}
/* ]]> */
// end hiding -->
</script>
</head>
<body>
<p>
<button onclick="launch()">Launch</button>
</p>
</body>
</html>

I got things working by shifting my Javascript to the parent and having the child reference the parent's function:

<html>
<head>
<script type="application/javascript">
let popup = null;

function launch() {
  popup = window.open("", "popup", "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=1400,height=550");

  if (!popup) {
    alert("Unable to create pop-up window.  Are you using a pop-up blocker?");
    return;
  }

  html = "";
  html += "<html>\n";
  html += "<body onload=\"alert('welcome, weary browser');\">\n";
  html += "<title>click me</title>\n";
  html += "<table class=\"buttons\">\n";
  html += "<tr>\n";
  html += "<td><button size=\"250\">Save</button\"/></td>\n";
  html += "<td><button size=\"250\" onclick=\"window.opener.dismissPopup(); return false;\">Cancel</button></td>\n";
  html += "</tr>\n";
  html += "</table>\n";
  html += "</body>\n";
  html += "</html>";

  popup.document.body.innerHTML = html;
}

window.dismissPopup = function() {
  if (popup) {
    popup.close();
    popup = null;
  }
  else {
    alert("No popup to close!");
  }
}
</script>
</head>
<body>
<p>
<button onclick="launch()">Launch</button>
</p>
</body>
</html>
John
  • 309
  • 2
  • 11

0 Answers0