Popup block detect

Copy

var btn = document.querySelector('#btn');

btn.addEventListener('click', function () {
  var popupWindow = window.open('https://www.naver.com');
  setTimeout(function () {
    if (!hasPopupBlocker(popupWindow)) {
      return;
    }
    alert('Popup is blocked!');
  }, 100);
});

function hasPopupBlocker(poppedWindow) {
  var result = false;

try {
    if (typeof poppedWindow === 'undefined') {
      // Safari with popup blocker... leaves the popup window handle undefined
      result = true;
    }
    else if (poppedWindow && poppedWindow.closed) {
      // This happens if the user opens and closes the client window...
      // Confusing because the handle is still available, but it's in a "closed" state.
      // We're not saying that the window is not being blocked, we're just saying
      // that the window has been closed before the test could be run.
      result = false;
    }
    else if (poppedWindow && poppedWindow.test) {
      // This is the actual test. The client window should be fine.
      result = false;
    }
    else {
      // Else we'll assume the window is not OK
      result = true;
    }

} catch (err) {
    //if (console) {
    //    console.warn("Could not access popup window", err);
    //}
  }
  return result;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Popup block detect</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>

    <style>
      #container {
        position: relative;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }

      .btn-box {
        display: inline-block;
      }

      .btn-box button {
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div class="btn-box">
        <h2>Detect with popup window</h2>
        <button id="btn">Action</button>
      </div>
    </div>
    <script>
      var btn = document.querySelector('#btn');

      btn.addEventListener('click', function () {
        var popupWindow = window.open('https://www.naver.com');
        setTimeout(function () {
          if (!hasPopupBlocker(popupWindow)) {
            return;
          }
          alert('Popup is blocked!');
        }, 100);
      });

      function hasPopupBlocker(poppedWindow) {
        var result = false;

        try {
          if (typeof poppedWindow === 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
          }
          else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
          }
          else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
          }
          else {
            // Else we'll assume the window is not OK
            result = true;
          }

        } catch (err) {
          //if (console) {
          //    console.warn("Could not access popup window", err);
          //}
        }
        return result;
      }
    </script>
  </body>
</html>