Question

我绝对坚持这一点，所以我希望你们能帮忙！

基本上我是在尝试刷新浏览器，如果浏览器的大小从960px或更高到959px或更低。

我希望这只发生一次，但是如果浏览器的大小调整为960px或更高，然后又重新调整大小，再次刷新...

不确定这是否真的有意义，但这就是我到目前为止所拥有的！

 function checkWidth() {
        var windowsize = $window.width();
        var i = 0;

        if (windowsize > 959 && i==0){
            var i = 1;
        }
        else if (windowsize <= 959 && i==1) {
           location.reload();
           var i = 0;      

        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);

任何帮助都会超级棒！ Cheeeers！

Answer 1

尝试这样

var i = 0;

$(function () {
    $(window).on("resize", function () {
        var windowsize = $(this).width();
        if (windowsize > 959 && i === 0) {
            i = 1;
        } else if (windowsize <= 959 && i == 1) {
            location.reload();
            i = 0;
        }
    });
});

Answer 2

你需要（）在函数第一行的窗口周围。

var i = 0;
function checkWidth() {
    var windowsize = $(window).width();

    if (windowsize > 959 && i==0){
        i = 1;
    }
    else if (windowsize <= 959 && i==1) {
       location.reload();
       i = 0;      
    }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

另外，如果你不介意我的问题，你的目标是什么？我假设您正在尝试进行某种响应式设计，如果是这样，您应该考虑使用CSS

@media (max-width:959px) { styles for when its under 959px wide go here }

这将把它变成处理响应的纯CSS方法，可能不需要你用javascript做任何事情。

Answer 3

试试这个..

function checkWidth() {
    var windowsize = $(window).width();
    var reload = false;

    if (windowsize > 959){
        reload = true;
    }
    else if (windowsize <= 959) {
        reload = true;
    }
    if(reload){
      location.reload();
    }
}
// Bind event listener
$(window).resize(checkWidth);

Answer 4

我使用了最终的解决方案，当我从'桌面'模式（575像素宽度或更多）移动到'移动'时，它工作正常，但是当从'移动'模式移动时（574像素宽度或更小）它没有完全重新加载/刷新页面。似乎javascript的菜单和临时视口宽度线没有完全重新加载，尽管所有页面内容都正确地重新加载。

有没有办法确保双向完全重装？我可能有 javascript在错误的地方？手动刷新将所有内容放在所有位置并恢复所有功能。

这是通过包含文件在所有页面的标题中：

<script type="text/javascript">
    var i = 0;
    function checkWidth() {
        var windowsize = $(window).width();
        if (windowsize > 574 && i==0){
            i = 1;
        }
        else if (windowsize <= 574 && i==1) {
            location.reload();
                i = 0;      
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
</script>

菜单的javascript就在我使用的版权包含文件之上：

    <script src="/js/jquery.dlmenu.js"></script>
    <script type="text/javascript">
        $(window).resize(function(){    
            $(function() {
                $( '#dl-menu' ).dlmenu({
                    animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
                });
            });
        });
    </script>

视口维度javascript包含在版权中：

<div id="dimensions">
    <script type="text/javascript">
       <!--
            var viewportwidth;
            var viewportheight;
            // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

            if (typeof window.innerWidth != 'undefined')
            {
                viewportwidth = window.innerWidth,
                viewportheight = window.innerHeight
            }
            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined'
                && typeof document.documentElement.clientWidth !=
                'undefined' && document.documentElement.clientWidth != 0)
            {
                viewportwidth = document.documentElement.clientWidth,
                viewportheight = document.documentElement.clientHeight
            }
            // older versions of IE
            else
            {
                viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
                viewportheight = document.getElementsByTagName('body')[0].clientHeight
            }
            document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
            <!-- document.write('<p>Your screen width is '+window.screen.width+'</p>);  -->
        //-->
    </script>
</div>

在调整过去的点时刷新浏览器一次--JQuery

4 个答案: