0

解释起来有点奇怪，所以我尽力而为。

我在一个移动网站上工作，我试图塑造成一个 ios 应用程序（最终）。在此页面上，我有一个菜单按钮，单击时显示/隐藏菜单。

大多数情况下一切正常，但问题是，当您单击“返回”按钮并且浏览器用完以前的位置返回时，菜单按钮会中断。当你点击它时，什么也没有发生。它表现得好像什么都没有。

错误是这样的，如果在索引（或第一页）上，单击一个链接前进，然后在浏览器上点击后退按钮，它会立即中断。

如果您在索引上，并以任何顺序点击例如 5 个链接（基本上您前进 5 次），然后，您回击到 4 次，菜单仍然有效....您基本上可以继续向前按下链接并成为好吧，尽可能地回击，并且比你前进的总次数少一秒，但仍然没问题。

一旦您达到最大后退，并且页面位置的历史记录中没有任何内容可以返回，菜单就会中断。

这是我正在处理的这个虚拟站点的链接（在我的服务器上）注意：为了测试，当它加载时，手动将浏览器缩小到大约 400 宽度，这样你就可以看到页面生效。

编辑** woops 忘记了链接 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 文件中并使用菜单选择隐藏/取消隐藏它。这里有两种方法可以做到这一点，每种方法都有自己的优点和缺点：

  1. 使用 CSS（包括菜单）修复您的标题（例如：lifeinthegrid.com/simple-css-fixed-header/），然后使您的菜单链接正常锚链接，没有 JavaScript 事件处理程序。当您单击菜单中的链接时，内容会跳转到该部分，并且由于您的标头是固定的，因此感觉就像是一个非常快的 httpRequest。优点：最少的 JavaScript，浏览器的后退和前进按钮都可以工作。缺点：固定元素在旧款智能手机上很麻烦，下一部分可能会潜入视口底部并破坏错觉。解决方案：在它们之间放置更多空间。

  2. 另一种方法是在不同的内容部分使用 show()/hide()。因此，假设您单击“关于我们”。所有部分都被隐藏，并显示“关于我们”的内容。优点：它不像固定元素那样烦人，您可以使用 FadeIn()/FadeOut() 或其他 JQuery 动画效果来增加它的趣味性。缺点：您的浏览器历史记录不会跟踪这些更改，除非您执行一些 window.location 黑客操作。

于 2012-08-10T09:32:54.787 回答