首次加載頁面時，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>