Javascript函数未在window.onresize上触发答案

【问题标题】：Javascript function not firing on window.onresizeJavascript函数未在window.onresize上触发
【发布时间】：2017-02-05 19:56:14
【问题描述】：

我创建了一个小脚本，使用 js 将表单垂直居中。但是，它似乎不适用于 window.onresize，我不明白为什么。顺便说一句，它在 window.onload 上完美运行，如果我要求，window.onresize 会在调整大小时发出警报。这是我的代码：

var resetHeight = function(){

  var loginForm = document.querySelector('.login-form');
  var windowHeight = window.innerHeight;
  var topNavbarHeight = document.querySelector('.top-navbar').clientHeight;
  var loginFormHeight = loginForm.clientHeight;
  var footerHeight = document.querySelector('footer').clientHeight;
  var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
  var halfHeight = (windowHeight-totalHeights) / 2;

  loginForm.style.paddingTop = halfHeight + "px";
  loginForm.style.paddingBottom = halfHeight+ "px";      

};

window.onload = resetHeight;

window.onresize = resetHeight;

【问题讨论】：

您的代码应该可以工作，似乎没有任何问题，请确保您在结束正文标记</body> 之前添加脚本并尝试将其包装在立即调用的函数中。像这样jsbin.com/rexuvel/edit?html,js,output

标签： javascript onresize

【解决方案1】：

这是我编写的一个 jquery 解决方案（对我来说）。有一个普通的 javascript 答案会很棒。

var resetHeight = function(){
  var loginForm = $(".login-form");
  var loginFormHeight = loginForm.height();
  var windowHeight = $(window).height();
  var topNavbarHeight = $('.top-navbar').height();
  var footerHeight = $('footer').height();
  var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
  var halfHeight = (windowHeight-totalHeights) / 2;
  loginForm.css({
    "padding-top":halfHeight,
    "padding-bottom":halfHeight
  });

} 

  $( document ).ready(function(){
   resetHeight();   
   window.addEventListener('resize', resetHeight);     
  });

【讨论】：

【解决方案2】：

像这样在 body 标签中加载调整大小操作

<body onresize="resetHeight()">

【讨论】：

与我已有的没有任何不同，但谢谢

【解决方案3】：

您是否尝试过在调整窗口大小时提醒您所需的值？您应该尝试一下 JQuery 解决方案：

window.addEventListener('resize', resetHeight);

另外，我会尝试在您的 HTML 标记内使用 onresize="resetHeight()" 事件侦听器。让我知道这是否有效！

【讨论】：

恐怕 JavaScript 只会渲染 .onresize 监听器一次。如果将其移动到 HTML 中的标记，则每次更改正文大小时都会呈现。
这行得通！！！有没有可能让我的代码在没有 jquery 的情况下工作的解决方案？谢谢！！！！！！
太棒了！你试过<body onresize="resetHeight()"> 方法吗？

【解决方案4】：

不是一个答案，而是一个建议，当您可以使用 CSS 时，为什么还要为此使用 javascript？它将表现得更好并支持更多的人。这是一个始终位于其容器中心的 div 的简单示例：

#centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
  width: 100px;
  height: 100px;
}

<div id="centered">

</div>

【讨论】：

嗨，感谢您的建议，但这对我不起作用。也许是因为我使用引导程序。
@rod122 是的，这是最简单的方法。您可能不应该听我的，但我也建议您不要使用引导程序，尤其是在您的表单不是超级复杂的情况下。它会给你更多的控制和更干净/更小的文件。更少的 div、更少的类、更少的 id，以及更多地了解这些东西是如何工作的，这样你就可以控制了。此外，应不惜一切代价避免使用 javascript 修补布局，因为它会消耗性能，并且可能会在不同平台上出现意外故障。我认为你应该尝试用尽可能少的 div 从头开始编写它。

【解决方案5】：

例如，您可以尝试使用 jquery 来执行此操作：

$(document).ready(function(){
  $( window ).resize(function() {
   var loginForm = document.querySelector('.login-form');
   var windowHeight = window.innerHeight;
   var topNavbarHeight = document.querySelector('.top-navbar').clientHeight;
   var loginFormHeight = loginForm.clientHeight;
   var footerHeight = document.querySelector('footer').clientHeight;
   var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
   var halfHeight = (windowHeight-totalHeights) / 2;

   loginForm.style.paddingTop = halfHeight + "px";
   loginForm.style.paddingBottom = halfHeight+ "px";  
});

});

【讨论】：