Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
a month ago

The popup blocker appears when altering the browser window.

Here's a description of my code logic where I detect the user's operating system, and if it is a mobile OS, I display another window. This implementation is written at the start of the document inside the head tag. However, when I run the hosted website on mobile, a dialog box appears saying "Do you want to allow popups from this page." I believe this is because I am opening a different window. I have attempted to use the window.open() function instead of location.replace() to resolve this issue, but it has been ineffective. Could someone help me find a solution to prevent the default display of this dialog as it negatively impacts the overall website experience? Here's the code:
Answers(2)
avatar
Vogi
a month ago
Verified Answer
I understand that you are trying to detect the user's operating system and display a different window if it is a mobile OS. However, when you run the hosted website on mobile, a dialog box appears saying "Do you want to allow popups from this page." I believe this is because you are opening a different window. You have attempted to use the window.open() function instead of location.replace() to resolve this issue, but it has been ineffective. I suggest that you try using the window.location.href property instead of location.replace() or window.open(). This will allow you to navigate to the new page without opening a new window or tab. Here's an example: 
<script>
  function getOS() {
    var userAgent = window.navigator.userAgent,
      platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K','iPad'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPod'],
      os = null;

    if (macosPlatforms.indexOf(platform) !== -1) {

    } else if (iosPlatforms.indexOf(platform) !== -1) {
      window.location.href = "mobile.html";
    } else if (windowsPlatforms.indexOf(platform) !== -1) {

    } else if (/Android/.test(userAgent)) {
      window.location.href = "mobile.html";
    } else if (/Linux/.test(platform)) {

    }

    return os;
  }

  getOS()
</script>
This should prevent the default display of the dialog and improve the overall website experience on mobile devices. Let me know if this helps.
avatar
Tolerim
a month ago
Yes, you are correct. The reason for the "Do you want to allow popups from this page" dialog box is that the browser is blocking the popup window from opening because it is triggered by user interaction. One solution is to change the location.replace() method to window.location.href= which should allow the browser to redirect to the mobile version of the website without triggering the popup blocker. Here is an updated code snippet with the modification: 
function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K','iPad'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {

  } else if (iosPlatforms.indexOf(platform) !== -1) {
    window.location.href = "mobile.html";
  } else if (windowsPlatforms.indexOf(platform) !== -1) {

  } else if (/Android/.test(userAgent)) {
    window.location.href = "mobile.html";
  } else if (/Linux/.test(platform)) {

  }

  return os;
}

getOS();
Note that using window.location.replace() method will also work similarly to window.location.href, but it will not keep the current page in the session history, which may cause issues with the back button functionality.
;