0

私はこれに絶対に行き詰まっているので、皆さんが助けてくれることを願っています!

基本的に、ブラウザのサイズが 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);

どんな助けでも超素晴らしいでしょう！乾杯！

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

関数の最初の行の window の前後に () が必要です。

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

私はこれから最終的な解決策を使用しました.「デスクトップ」モード（幅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 に答える