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

时间:2016-04-03 15:26:28

标签: javascript ipad safari

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>

1 个答案:

答案 0 :(得分:0)

这两步:

  1. 将您的脚本(所有这些)移动到HTML的底部,就在结束</body>标记之前。这样,下载脚本并不会阻止渲染页面; (与你的问题更相关)他们试图采取行动的因素将在他们运行之前存在。更多:YUI Best Practices for Speeding Up your Website

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

    detectIPadOrientation();
    
  3. 附注:不需要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>