0

我完全坚持这一点，所以我希望你们能提供帮助！

基本上，如果浏览器的大小从 960px 或以上调整为 959px 或以下，我会尝试刷新浏览器。

我希望这种情况只发生一次，但是如果浏览器重新调整到 960 像素或以上，然后再次调整大小，再次刷新......

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

 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);

任何帮助都会非常棒！干杯！

4

4 回答 4

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;
        }
    });
});
于 2013-07-26T23:32:42.743 回答
0

您需要 () 在函数的第一行围绕窗口。

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 做任何事情。

于 2013-07-26T23:27:09.883 回答
0

试试这个..

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);
于 2013-07-26T23:38:30.967 回答
0

我使用了最终的解决方案，当我从“桌面”模式（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>
于 2018-02-21T19:39:54.617 回答