当页面第一次加载时，javascript设置ipad的绝对位置

Question

iPad 方向更改后，绝对定位才起作用。当页面首次加载时，没有定位。

如何让页面以正确的位置和正确的方向加载？

<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

两个步骤:

1. 将脚本(全部)移至 HTML 底部，就在结束符 </body> 之前标签。这样，下载脚本就不会影响页面的渲染；并且(与您的问题更相关)它们尝试执行操作的元素将在运行之前存在。更多:YUI Best Practices for Speeding Up your Website

2. 添加对您的函数的调用:

   detectIPadOrientation();
   

旁注:不需要 type属性，JavaScript 是默认值。

所以(见评论):

<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>