Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0

    Check that your browser does not block popup as your comment says.

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search