0

これは説明するのが少し変なので、最善を尽くしてください。

私は（最終的に）iOSアプリに形を変えようとしているモバイルサイトに取り組んでいます。このページには、クリックするとメニューを表示/非表示にするメニューボタンがあります。

ほとんどの場合、すべてが機能していますが、問題は、「戻る」ボタンをクリックして、ブラウザが戻る前の場所を使い果たしたときに、メニュー ボタンが壊れることです。クリックしても何も起こりません。何もないかのように振る舞います。

インデックス（または最初のページ）で1つのリンクをクリックして先に進み、ブラウザで戻るボタンを押すと、エラーは次のようになります。

インデックス上で、たとえば 5 つのリンクを任意の順序でヒットした場合 (基本的には 5x 先に進みました)、その後、最大 4x までヒットしても、メニューは引き続き機能します... 基本的に、リンクを先に押し続けて、大丈夫、好きなだけ反撃し、前に進んだ合計回数より1回少ない短い時間で停止しても問題ありません。

戻る回数が最大になり、ページの場所の履歴に戻る場所がなくなるとすぐに、メニューが壊れます。

（私のサーバー上で）取り組んでいるこのダミーサイトのリンクは次のとおりです。

編集**おっと、リンクを忘れました http://somdowprod.net/4testing/mobile/less1.html

ここに私のコードがあります

javascript:(そこにコメントを残したので、私のロジックがどこにあるのかがわかります...おそらく間違っているのでしょうか?)

// JavaScript Document
$(document).ready(function(){
var newHash = "";
var menuBtn = $('.leftButton');

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
    menuBtn.click( menuShowHide);
    //===========================//

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW / HIDE
    function menuShowHide(){
        $('#menu').toggleClass();

//      if($('#menu').css("display") == "none"){
//          $('#menu').css("display","block");
//      }   else {
//          $('#menu').css("display","none");   
//      }
        scroll(0,0);    
    }
    //===========================//


    //~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick.
        function isLoaded(){
            $('#progress').remove();    
        }
    //===========================//



    //~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE
        if(newHash == ""){
            $('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
            $('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file
        }
    //===========================//




    //~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX
    $('#menu a').click(function(){
        menuShowHide();
        window.location.hash = $(this).attr('href');
        return false; //doesnt let the link jump to a new page

    });

    $(window).bind('hashchange',function(){
        newHash = window.location.hash.substring(1);
        $('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
        $('#contentHere').load(newHash, isLoaded);
        //console.log(newHash); 

    });

    //===========================//



});

メニューが壊れる原因について何か考えがある人はいますか? ありがとうございます。

4

1 に答える 1

1

hashchange イベントは、ブラウザーの [戻る] ボタンで予測できないことが知られています。

これが何が起こっているかです。最初に戻ると、less.html ページ全体が独自の「contentHere」コンテナにロードされています。このサブページでは document.ready が呼び出されないため、menuButton.click ハンドラは割り当てられません。リンクをクリックしても何も起こりません。

非同期の変更でブラウザの戻るボタンと進むボタンを使用できるのはすばらしい機能ですが、回避策をハックしようとするほど人々がそれを見逃すことはないと思います。人々は、非同期に読み込まれたコンテンツで戻るボタンと進むボタンを使用できないことに慣れています。彼らは一度試してみて、あなたのサイトのリファラーに移動することを確認し、前に進み、無意識のうちに戻るボタンと進むボタンの代わりにメニューを使用するように心に留めます.

しかし、おそらくより良い提案は、AJAX 機能を完全に取り除き、人々が期待するようにリンクを機能させることです。さて、クールな「ロード」モーダルを失い、ユーザーの時間を少し節約できますが、インターフェースに対する人々の期待を混乱させることはありません.

編集: 以下の質問に答えるには、load() を使用して静的コンテンツを取得するのではなく (やり過ぎです)、すべてのコンテンツを less.html ファイルにセクションとして配置し、メニュー選択を使用して非表示/非表示にします。これを実現する 2 つの方法を次に示します。それぞれに長所と短所があります。

  1. CSS (メニューを含む) でヘッダーを修正し (例: lifeinthegrid.com/simple-css-fixed-header/)、メニュー リンクを JavaScript イベント ハンドラーのない通常のアンカー リンクにします。メニューのリンクをクリックすると、コンテンツがそのセクションにジャンプし、ヘッダーが固定されているため、非常に高速な httpRequest のように感じられます。利点: 最小限の JavaScript、ブラウザの戻るボタンと進むボタンが機能します。短所: 固定要素は古いスマートフォンでは厄介です。次のセクションがビューポートの下部に忍び込み、錯覚を台無しにする可能性があります。解決策: それらの間にもっとスペースを入れてください。

  2. もう 1 つの方法は、さまざまなコンテンツ セクションで show()/hide() を使用することです。「私たちについて」をクリックしたとしましょう。すべてのセクションが非表示になり、「私たちについて」のコンテンツが表示されます。利点: 固定要素ほど煩わしくなく、FadeIn()/FadeOut() やその他の JQuery アニメーション効果で刺激を与えることができます。欠点: window.location ハッカーを行わない限り、ブラウザーの履歴はこれらの変更を追跡しません。

于 2012-08-10T09:32:54.787 に答える