首次加载页面时，javascript为ipad设置绝对位置

Question

Absolute positioning is working after the iPad's orientation is changed. When the page first loads there is no positioning.

How do I get the page to load with the correct position to the correct orientation?

<script type="text/javascript">
  window.onorientationchange = detectIPadOrientation;

  function detectIPadOrientation() {
    if (orientation == 0) {
      //alert ('Portrait Mode, Home Button bottom');

      var elementStyle = document.getElementById("emkeypos").style;

      elementStyle.position = "absolute";

      elementStyle.top = "390px"
      elementStyle.left = "20px";

    } else if (orientation == 90) {
      //alert ('Landscape Mode, Home Button right');

      var elementStyle = document.getElementById("emkeypos").style;

      elementStyle.position = "absolute";

      elementStyle.top = "470px"
      elementStyle.left = "30px";

    } else if (orientation == -90) {
      //alert ('Landscape Mode, Home Button left');
      var elementStyle = document.getElementById("emkeypos").style;

      elementStyle.position = "absolute";

      elementStyle.top = "470px"
      elementStyle.left = "30px";
    } else if (orientation == 180) {
      //alert ('Portrait Mode, Home Button top');

      var elementStyle = document.getElementById("emkeypos").style;

      elementStyle.position = "absolute";

      elementStyle.top = "390px"
      elementStyle.left = "20px";
    }
  }
</script>
<div id="emkeypos">
  <a href="contest.html"><img src="#httploc#/expmeridian/assets/customer/EMkey.png" width="50px"></a>
</div>

Answer 1

Two steps to this:

1. Move your scripts (all of them) to the bottom of the HTML, just before the closing </body> tag. That way, downloading your scripts doesn't hold up rendering your page; and (more relevant to your question) the elements they try to act on will exist before they run. More: YUI Best Practices for Speeding Up your Website

2. Add a call to your function:

    detectIPadOrientation(); 

Side note: No need for the type attribute, JavaScript is the default.

So (see comments):

<div id="emkeypos"><a href="contest.html"><img src="#httploc#/expmeridian/assets/customer/EMkey.png" width="50px" ></a></div>
<!-- MOVED SCRIPTS -->
<script>
window.onorientationchange = detectIPadOrientation;
detectIPadOrientation(); // <=== ADDED CALL
function detectIPadOrientation () {
   if ( orientation == 0 ) {
        //alert ('Portrait Mode, Home Button bottom');

           var elementStyle = document.getElementById("emkeypos").style;

           elementStyle.position = "absolute";

           elementStyle.top = "390px"
           elementStyle.left = "20px";

   }
   else if ( orientation == 90 ) {
       //alert ('Landscape Mode, Home Button right');

           var elementStyle = document.getElementById("emkeypos").style;

           elementStyle.position = "absolute";

           elementStyle.top = "470px"
           elementStyle.left = "30px";

   }
   else if ( orientation == -90 ) {
    //alert ('Landscape Mode, Home Button left');
           var elementStyle = document.getElementById("emkeypos").style;

           elementStyle.position = "absolute";

           elementStyle.top = "470px"
           elementStyle.left = "30px";
   }
   else if ( orientation == 180 ) {
    //alert ('Portrait Mode, Home Button top');

           var elementStyle = document.getElementById("emkeypos").style;

           elementStyle.position = "absolute";

           elementStyle.top = "390px"
           elementStyle.left = "20px";
   }
}
</script>
</body>
</html>