Question

这有点奇怪，可以解释如此恶心。

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

大部分内容都在起作用，但问题是，当您单击“后退”按钮并且浏览器用完以前的位置时，菜单按钮会中断。单击它时，没有任何反应。它表现得好像什么都没有。

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

如果你在索引上，例如，按任意顺序点击5个链接（基本上你前进5xs），之后，你点击返回最多4xs，菜单仍然可以...你可以基本上保持向前按压链接并保持良好状态，尽可能地回击并停止比你前进的总时间少一个并且仍然没问题。

当很快，当您点击最大后退，并且页面位置的历史记录中没有任何内容可以返回时，菜单会中断。

这是我工作的虚拟网站的链接（在我的服务器上）注意：进行测试，在加载时，手动将浏览器缩小到大约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); 

    });

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



});

任何人都有什么想法让菜单中断？谢谢你提前。

Answer 1

已知使用浏览器后退按钮无法预测hashchange事件。

这是发生了什么。当你一直回到开头时，整个less.html页面被加载到它自己的'contentHere'容器中，并且由于不会在这个子页面上调用document.ready，因此不会将menuButton.click处理程序分配给链接，所以点击它们不会做任何事情。

虽然能够在异步更改中使用您的浏览器后退和前进按钮将是一个很好的功能，我不认为人们会错过它足以让您尝试破解解决方法。人们习惯于无法在异步加载的内容上使用后退和前进按钮。他们会尝试一次，看到它将它们带到您网站的推荐人，向前推进，并下意识地记下使用您的菜单而不是后退和前进按钮。

然而，可能更好的建议是完全摆脱AJAX功能，让链接按照人们期望的方式行事。好吧，所以你失去了很酷的“加载”模式，你节省了很少的时间，但是你不会混淆人们对你的界面的期望。

编辑：回答下面的问题，而不是使用load（）来获取静态内容（这是过度杀伤），将所有内容作为部分放在你的less.html文件中，并使用菜单选项隐藏/取消隐藏它。以下是实现这一目标的两种方法，每种方法都有各自的优缺点：

使用CSS（包括菜单）（例如：lifeinthegrid.com/simple-css-fixed-header/）修复标题，然后使菜单链接普通的锚链接而不使用JavaScript事件处理程序。当您单击菜单中的链接时，内容将跳转到该部分，并且由于您的标题已修复，因此它具有非常快速的httpRequest的感觉。优点：最小的JavaScript，浏览器的后退和前进按钮将起作用。缺点：固定元素对旧款智能手机造成麻烦，下一部分可能潜入视口底部并破坏幻觉。解决方案：在它们之间留出更多空间。
另一种方法是在不同的内容部分使用show（）/ hide（）。所以，假设你点击“关于我们”。所有部分都被隐藏，并显示“关于我们”的内容。优点：它不像固定元素那么烦人，你可以使用FadeIn（）/ FadeOut（）或其他JQuery动画效果来加强它。缺点：除非你做一些window.location hackery，否则你的浏览器历史记录不会跟踪这些更改。

jquery AJAX后退问题

1 个答案: