Javascript 以设置的窗口宽度调用JS函数

我想调用一个JavaScript函数，该函数在每次加载窗口时以及每次重新调整屏幕大小时检查窗口的宽度。原因是我不想在屏幕尺寸太小时使用功能，例如手机尺寸

这能做到吗

我试过这样做

window.onload = function () {
    if (window.onload.innerWidth > 991 || window.onresize.innerWidth > 991) {
        var maxHeight = 0;
        setTimeout(function () {
            maxHeight = 0;
            $(".menu> div").each(function () {
                var thisHeight = parseInt($(this).css("height").toString().replace("px", ""));
                if (thisHeight > maxHeight) {
                    maxHeight = thisHeight;
                }
            });
            $(".menu> div").css("height", maxHeight.toString() + "px");
            $(".menu").sortable({
                handle: "h3",
                placeholder: {
                    element: function (currentItem) {
                        return $("<div class='col-md-4 placeholderBlock' style='height:" + (maxHeight).toString() + "px; '></div>")[0];
                    },
                    update: function (container, p) {
                        return;
                    }
                }
            });
            $(".menu").disableSelection();

            $(".widget").each(function () {
                $(this).click(function () {
                    enableDisableWidget($(this));
                });
            });

            setInterval(function () {
                var menu= { items: [] };
                $(".menu> div").each(function () {
                    menu.items.push(
                        {
                            classes: "." + $(this).attr("class").replace(/\ /g, ' ')
                        }
                    );
                });
                $(".hiddenField_dashboardLayout").val(JSON.stringify(dashboardItems));
            }, 500);
        }, 2000);
    }
}

window.onload=函数（）{
如果（window.onload.innerWidth>991 | | window.onresize.innerWidth>991）{
var maxHeight=0；
setTimeout（函数（）{
最大高度=0；
$（“.menu>div”）。每个（函数（）{
var thishheight=parseInt（$（this）.css（“height”）.toString（）.replace（“px”）和“）；
如果（此高度>最大高度）{
最大高度=此高度；
}
});
$（“.menu>div”）.css（“height”，maxHeight.toString（）+“px”）；
$（“.menu”）.sortable({
手柄：“h3”，
占位符：{
元素：函数（currentItem）{
返回$（“”）[0]；
},
更新：功能（容器，p）{
返回；
}
}
});
$（“.menu”）.disableSelection（）；
$（“.widget”）。每个（函数（）{
$（此）。单击（函数（）{
enableDisableWidget（$（this））；
});
});
setInterval（函数（）{
var菜单={items:[]}；
$（“.menu>div”）。每个（函数（）{
menu.items.push(
{
类：“.”+$（this.attr（“类”）.replace（/\/g.））
}
);
});
$（.hiddenField_dashboardLayout”）.val（JSON.stringify（dashboardItems））；
}, 500);
}, 2000);
}
}

window.onload.innerWidth>991 | | window.onresize.innerWidth

那是行不通的。这两个事件属性都没有名为innerWidth的属性

您需要将其更改为：

document.body.offsetWidth

，

window.innerWidth

或

document.documentElement.clientWidth

onload将执行页面加载时所需的操作

添加另一个名为

onresize

$(window).on("resize", function(){});

您还可以为此使用CSS：

@media only screen and (min-width: 991px) { ... }

---

只有当屏幕大于991像素时，方括号之间的css规则才会应用。

您可以使用jQuery向调整大小事件添加侦听器：

$(window).on("resize", function(){
    console.log("resized");
});

或者是纯javascript方式，这是出于礼貌

我写这段代码是为了满足你的需要。纯javascript：

//this function will return true if the window is too small
var isTooSmall = function(w, h){
    console.log(w + " " + h); //just to check width and height
    var min_w = 200; //set these to what you wish
    var min_h = 200;
    if(w < min_w || h < min_h){
        return true;
    }
    else return false;
};

//this function will allow us to bind listeners given an object and its event.
//Check the linked stackoverflow answer for more explanation
var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

//resize listener
addEvent(window, "resize", function(event) {
    console.log(isTooSmall(window.innerWidth, window.innerHeight));

});

//onload listener
window.onload = function () { 
    console.log(isTooSmall(window.innerWidth, window.innerHeight));
}

//如果窗口太小，此函数将返回true
var Istosmall=函数（w，h）{
console.log（w+“”+h）；//仅用于检查宽度和高度
var min_w=200；//将这些设置为您想要的
var min_h=200；
if（w

---

下面是一个例子，让我们来看看它的实际效果。

这应该适合您：

function yourFunction() {
    if (window.innerWidth >= 992) {
        //TODO: Your code here
    }
}

// Set both event handlers to same function
window.onload = window.onresize = yourFunction;

顺便说一下，这条线

if (window.onload.innerWidth > 991 || window.onresize.innerWidth > 991)

---

…不起作用，因为

window.onload

和

window.onresize

是函数。

您可以让函数检查

窗口。innerWidth

大于您的限制大小

var limitFunc = function(){
    if (window.innerWidth>999){
       /*your functions for big screen*/
     console.log('bigScreen')
    }
};

在窗口调整大小和onload事件上启动limit函数

window.addEventListener("resize", limitFunc);
window.addEventListener("onload", limitFunc);

函数myFunction（）{
var w=窗宽、外径；
//var h=窗口。外部灯光；
如果（w>991）{
document.getElementById（“p”）.innerHTML=“大”+w；
}否则{
document.getElementById（“p”）.innerHTML=“small”+w；
}
}

您能添加一些解释吗？是的，我正在用注释立即更新代码！您想要纯JavaScript答案还是使用jQuery的答案？@BDawg两者都可以。我试着使用下面的一些建议，但它们似乎只起作用一次。例如，如果我多次调整页面大小，那么函数似乎不起作用，这是一个有趣的问题。我可以问一下您在使用哪个浏览器时遇到困难吗？还有，在那个浏览器上对你有用吗？每次调用函数时，它应该加1

window.addEventListener("resize", limitFunc);
window.addEventListener("onload", limitFunc);