jquery AJAX backbutton problems

Question

이렇게 나쁘다고 설명하는 것이 조금 이상합니다.

나는 결국 ios 앱을 만들려고하는 모바일 사이트에서 일하고 있습니다. 이 페이지에는 메뉴 버튼이 있습니다.이 버튼은 클릭 할 때 메뉴를 표시하거나 숨 깁니다.

거의 모든 것이 제대로 작동하지만 "뒤로"버튼을 클릭하면 브라우저가 이전 위치로 돌아가서 메뉴 단추가 끊어지는 문제가 있습니다. 그것을 클릭하면 아무 일도 일어나지 않습니다. 그것은 아무 것도없는 것처럼 행동합니다.

색인 (또는 첫 번째 페이지)에서 앞으로 이동하려면 하나의 링크를 클릭 한 다음 브라우저에서 뒤로 단추를 누르면 오류가 즉시 발생합니다.

예를 들어 인덱스에 5 개의 링크가있는 순서로 5 개의 링크가있는 경우 (본질적으로 5 배가 됨) 까지 다시을 누르십시오. 메뉴는 여전히 작동합니다. 링크를 앞으로 계속 누르고 있으면 좋을 것입니다. 원하는만큼 멀리 내리고 짧은 시간을 총계 시간보다 짧게 유지하십시오.

곧으로 최대 등을 맞 춥니 다. 다시 페이지 위치 기록에 남아 있지 않아 메뉴가 중단됩니다.

참고 : 로드 할 때 수동으로 브라우저를 약 400 너비로 축소하여 페이지가 적용되는 것을 볼 수 있도록이 더미 사이트의 링크입니다 (내 서버에서).

편집 ** woops는 http://somdowprod.net/4testing/mobile/less1.html

여기 내 코드

자바 스크립트입니다 링크를 잊었 : (내 논리에서 어디에 있는지 볼 수 있도록 내가 ..., 거기에 아마 메신저 코멘트를 남겨 그것에 대해 잘못 가고있는거야?)

// 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 기능을 모두 없애고 링크가 사람들이 기대하는대로 작동하도록하는 것입니다. 좋아요, 당신은 시원한 'Loading'모달을 잃어 버리고 사용자는 약간의 시간을 절약 할 수 있습니다.하지만 인터페이스에 대한 사람들의 기대를 혼란스럽게하지는 않습니다.

편집 : load()를 사용하여 정적 콘텐츠 (잔인한 콘텐츠)를 얻는 대신 less.html 파일에 모든 콘텐츠를 섹션으로 저장하고 메뉴 선택을 사용하여 숨기기/숨김을 해제하십시오 .

1. 는 (메뉴 포함) CSS와 헤더를 수정 (예 : lifeinthegrid.com/simple-css-fixed-header/)과 여기에 자신의 장점과 단점에이 각을 달성하는 방법은 두 가지가 있습니다 메뉴 링크를 자바 스크립트 이벤트 처리기가없는 일반 앵커 링크에 연결합니다. 메뉴에서 링크를 클릭하면 내용이 해당 섹션으로 이동하고 헤더가 고정되어 있기 때문에 매우 빠른 http 요청임을 느끼게됩니다. 장점 : 최소한의 자바 스크립트, 브라우저의 뒤로 및 앞으로 버튼이 작동합니다. 단점 : 고정 요소는 구형 스마트 폰의 성가신 문제이며, 다음 섹션은 뷰포트 하단으로 몰래 들어와 환상을 망칠 수 있습니다. 해결책 : 그들 사이에 더 많은 공간을 두십시오.

2. 다른 방법은 다른 콘텐츠 섹션에서 show()/hide()를 사용하는 것입니다. 자, '우리에 대해서'를 클릭한다고 가정 해 봅시다. 모든 섹션이 숨겨져 있으며 'About us'콘텐츠가 표시됩니다. 장점 : 고정 요소만큼 귀찮지는 않지만 FadeIn()/FadeOut() 또는 다른 JQuery 애니메이션 효과를 사용하여 그 효과를 극대화 할 수 있습니다. 단점 : 일부 Windows.location hackery를 수행하지 않으면 브라우저 기록에서 이러한 변경 사항을 추적하지 않습니다.