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

javascript setting absolute position for ipad when the page loads the first time

本文关键字：ipad 位置 设置 第一次 加载 javascript      更新时间：2023-12-20

改变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. 将您的脚本（所有脚本）移动到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>
相关文章：