Question

<script type="text/javascript">
    window.onload = widthFunction();
    window.onresize = function widthFunction(){
        var viewportWidth;
        var fouronefour;
        rotdiv = document.getElementById("rotationdiv");
        viewportWidth = window.innerWidth;
        fouronefour = 414;
        if(parseInt(viewportWidth) < parseInt(fouronefour))
        {rotdiv.style = "visibility:visible;";}
        }
</script>

<body>
<div id="rotationdiv" style="visibility:collapse;">If you would like to see more columns, click <a href="WiderPage.aspx">here</a>.</div>
</body>

我知道window.onload = widthFunction();存在问题。我基本上希望这个函数做的是“在加载和调整大小时，检查屏幕大小。如果屏幕大小超过414px，则显示div，要求客户端转到更宽的页面。”

这是一个包含许多边界的网格视图。我想我会尝试这个，因为我正在将我的网站扩展到移动浏览器

Answer 1

摆脱第一行中的parens。

window.onload = widthFunction;

实际上，它正在将widthFunction的 return 设置为onload事件 - 这是未定义的。

编辑：实际上，如果您的浏览器正在实现JS正确（因为您不在IE中），我相信这仍然无效 - 名称widthFunction将不会在函数本身之外定义。您必须首先在外部使用

定义widthFunction

function widthFunction() {
    ...
}

或

var widthFunction = function() {
    ...
}

另外，为什么要将414设置为奇怪命名的变量，然后parseInt呢？你的parseInt没有做任何事情，因为你已经使用了数字类型。另外，如果你要将414放入一个变量中，你也可以给它一个更有意义的名字。 “fouronefour”无助于摆脱魔法常数。

Answer 2

此：

rotdiv.style = "visibility:visible;";

应该是

rotdiv.style.visibility = "visible";

Answer 3

也许尝试类似的事情：

function widthFunction(){
    var viewportWidth;
    var fouronefour;
    rotdiv = document.getElementById("rotationdiv");
    viewportWidth = window.innerWidth;
    fouronefour = 414;
    if(parseInt(viewportWidth) < parseInt(fouronefour))
    {rotdiv.style = "visibility:visible;";}
} 
window.onresize = window.onload = widthFunction;

Answer 4

window.onresize = function widthFunction(){...}

您要将window.onresize设置为某个功能，但widthFunction此处不执行任何操作。这不会创建一个名为widthFunction的函数。

所以，在行中：

window.onload = widthFunction();

widthFunction未定义，因为它从未被定义过。

您要做的是，首先声明widthFunction：

function widthFunction(){
   var viewportWidth;
   var fouronefour;
   rotdiv = document.getElementById("rotationdiv");
   viewportWidth = window.innerWidth;
   fouronefour = 414;
   if(parseInt(viewportWidth) < parseInt(fouronefour)){
       rotdiv.style = "visibility:visible;";
    }
}

然后将window.onresize和window.onresize设置为：

window.onload = widthFunction;
window.onresize = widthFunction;

编辑：widthFunction函数有些事情让我烦恼。

为什么要创建一个名为fouronefour的变量？只需使用414即可。此外，您不需要parseInt。

if(viewportWidth < 414){ // window.innerWidth returns you a number, not a string

另外，这个：

rotdiv.style = "visibility:visible;";

应该是：

rotdiv.style.visibility = "visible";

问题设置window.onload和window.onresize

4 个答案: