Search code examples
javascripthtmlpopup

Open and close a popup window in javascript


I tried to open and close a popup in a simple HTML page with javascript, but maybe im missing basic knowledge of JS. First I tried to declare global variable myPopupHandle. But hat is'nt populated in myOpenWnd. Here is the code maybe somebody can help.

<head>
  <meta charset="utf-8">
  <title>WndCloseTest</title>
</head>

<body>
  <button type="button" onclick="myOpenWnd()">Open Popup Window</button>
  <button type="button" onclick="myCloseWnd()">Close Popup Window</button>
  <script type='text/javascript'>
    let myPopUpHandle = null; // Always null
    window.addEventListener("onunload", function(e) {
      myCloseWnd();
    });

    function myCloseWnd() {
      if (windowObjectReference != null)
        windowObjectReference.close();
    }

    function myOpenWnd() {
      const windowFeatures = "left=100,top=100,width=320,height=320";
      /*
      myPopUpHandle = window.open(
          "https://www.mozilla.org/",
          "mozillaWindow",
          windowFeatures,
      );
      Don't work popUpHandle is null after this
       */


      const handle = window.open(
        "https://www.mozilla.org/",
        "mozillaWindow",
        windowFeatures,
      );
      if (!handle) {
        console.log("his is likely caused by built-in popup blockers"); // logs the className of my_element
        // The window wasn't allowed to open
        // This is likely caused by built-in popup blockers.
        // …
      } else
        window['windowObjectReference'] = handle;
    }
  </script>
</body>


Solution

  • As the popup window and the parent window are from different origin, you can't directly close the popup window programmatically due to the same-origin policy, which restricts interactions between scripts from different origins for security reasons.

    Read the docs at MDN

    If the website from a different domain allows being embedded within an iframe and doesn't have any security restrictions preventing it, you can indeed open it within an iframe in a popup window and close it programmatically from parent window.

    <head>
        <meta charset="UTF-8">
        <title>WndCloseTest</title>
    </head>
    
    <body>
        <button type="button" onclick="myOpenWnd()">Open Popup Window</button>
        <button type="button" onclick="myCloseWnd()">Close Popup Window</button>
        <script>
            var popup;
            function myOpenWnd() {
                var popup = window.open("", "", "popup");
                popup.document.write('<iframe style="width:100%; height:100%; display:block;" id="popupFrame" src="' + 'https://www.wikipedia.org/' + '" frameborder="0"></iframe>');
                if (!popup || popup.closed || typeof popup.closed == 'undefined') {
                    alert("Popup window was blocked by the browser. Please allow popups for this site.");
                }
                window['popupWin'] = popup;
            }
            
            function myCloseWnd() {
                popupWin.close();
                console.log("closed");
            }
        </script>
    </body>
    

    https://jsfiddle.net/shardulvikrm/Lhq59ov4/