I need to prevent the page from displaying until a script is run

Question

I have this script at the very top of my page

<script type = "text/javascript">
if(typeof window.orientation !== 'undefined'){ var ortvalue = "defined"; }
if(ortvalue != "defined") {
document.location.replace("http://www.redirect-here.com");
}
else {
}
</script>

All the script does is check if the user is on a computer, as opposed to a mobile device. If the user is on a computer, then the script redirects to a different site. The script works fine, but sometimes the page loads and displays for a moment before the redirect occurs. It's a minor nuance, but I was hoping there was a way to prevent the page from displaying any content while the redirect occurs.

Assuming that "orientation" being present means "mobile device" is not safe. Consider Windows 8 surface tablets and laptops with orientation sensors. — Jon Watte, Jun 29 '15 at 03:33

score 1 · Accepted Answer · edited May 23 '17 at 10:26

It takes some time for the redirect to resolve the address if it isn't cached, fetch the content, and display it in the page. This happens asynchronously.

If you can move this script just below the body tag, then you can simply hide the body of the document before the location.replace happens.

<body>
<script>
var ortvalue;
if(typeof window.orientation !== 'undefined') {
  var ortvalue = "defined"; 
}

if(ortvalue !== "defined") {
  document.body.style.display = 'none';
  document.location.replace("http://www.redirect-here.com");
}
</script>

You said that "the script works fine" otherwise, so I'll not change that, but there may be ways this could fail on newer and newer devices. Here are suggestions of other ways to detect mobile browsers: Detecting a mobile browser

Thank you, with a minimal amount of added code you've fixed my problem! Oh, and "no comment" duly noted lol. — Jonathan Yoo, Jun 29 '15 at 03:57

score 0 · Answer 2 · answered Jun 29 '15 at 03:12

Do following, hide the document, do visibility:hidden and later remove the style tag if it is cell phone or just redirect if not mobile device:

document.write( '<style class="hidedocument" ' +
                'type="text/css">body {visibility:hidden;}<\/style>');
<script type = "text/javascript">
  if(typeof window.orientation !== 'undefined'){ var ortvalue = "defined"; }
  if(ortvalue != "defined") {
   document.location.replace("http://www.redirect-here.com");
  }
else {
 var tempCheck;
 var allStyles = document.getElementsByTagName('style');
      var i = allStyles.length;
      while (i >-1) {
        tempCheck = styles[i];
        if (tempCheck.className == 'hidedocument') {
          tempCheck.parentNode.removeChild(tempCheck);
        }
      i--;}
}
</script>

user2864740 · Answer 3 · 2015-06-29T07:49:59.543

The problem is because location.replace is slightly asynchronous wrt the DOM loading/rendering. The JavaScript itself is synchronous and is executed inline with the DOM building. That is, the JavaScript has run even though the page briefly shows the HTML content.

If this is indeed the case one solution within the constraints may be to 'hide' the normal body content (such as setting the body element's display to none) before invoking the location.replace.

<body>
 <script>
   if (not_on_a_mobile_device) {
     document.body.style.display = 'none';
     document.location.replace("http://www.redirect-here.com");
   }
 </script>

I need to prevent the page from displaying until a script is run

3 Answers3