首次加载页面时，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加速网站的最佳实践

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>