페이지 새로 고치기없이 동적 웹 사이트 페이지로드

Question

링크 클릭시 div에 다른 페이지를로드하는 html 페이지와 같은 쉘을 만들었습니다. 문제는 페이지를 다시로드하지 않고 URL을 다시 작성하는 것입니다. 또한 해시 이벤트를 확인하여 다시 추가하고 다시 작성하십시오.

먼저 링크;

<a href = "myexample" onclick="menuPage(this);return false;" > 
    //result www.mywebsite.com/myexample 

function loadPage(){ 
    var tempURL = window.location.hash.substring(1); 
    $(".nav li").removeClass("active"); 
    $("a[data-role="+tempURL+"]").parent().addClass('active'); 
    if(!tempURL){ 
    $('#pages').animate({opacity: '0.0'},function(){ 
     $("a[data-role='Home']").parent().addClass('active'); 
     $.get('Home/index.html', function(response){ 
     $('#pages').html(response); 
     scrollOnTop(); 
     $('#pages').animate({opacity: '1.0'}); 
     })  
    }); 
    }else{ 

    $('#pages').animate({opacity: '0.0'},function(){ 
     jQuery.post(tempURL, function(response){ 

     $('#pages').html(response); 
     ga('send',{ // google 
      'hitType': 'pageview', 
      'title': 'mywebsite', 
      'location':'http://www.mywebsite.com/'+ tempURL, 
      'page': '/'+ tempURL 
     });  

     document.title = $(response).filter('title').text(); 
     scrollOnTop(); 
     $('#pages').animate({opacity: '1.0'}); 
     tempURL = ""; 
     }) 
    }); 
    } 
} 
$(window).on("hashchange", function() { 
    loadPage();  
}); 
function menuPage(obj){ 

    menu = "#" + obj.getAttribute("href"); 
    window.location = menu; 
    return false; 
} 

function scrollOnTop(){ 
    jQuery("html, body").scrollTop(0);  
}  
//The above works 100% expected:** 

그래서이 해당 페이지에 데려 갈 것이다 www.myexample.com/#item1 내가 링크를 클릭하거나 URL을 입력 말할 수있는 모든 좋은 하지만 내가 www.myexample를 클릭하거나 유형 말할 수 .com/item1 with out hash 이것은 페이지에 걸리 겠지만 인덱스 파일이 들어있는 "item1"폴더가 있기 때문에 모두 망가져 있습니다 ...

기본적으로 나는 URL에 해시를 추가하고 싶습니다. 일단 .htaccess 파일에 다음 내용을 추가하면 : RewriteRule

^([A-Za-z0-9-]+)/?$ # [NC,NE,R=301] 

또는 유사합니다.

이것은 엉망입니다.

Answer 1

코드가하는 일을 이해하는 것이 약간 어렵습니다. jsfiddle 또는 동등한 도움이 될 수 있습니다.

URL 해시가 변경 될 때만 loadPage가 실행되는 것처럼 보입니까? 그리고 www.myexample.com/item1의 href가있는 앵커는 해시 변경을 초래하지 않습니다.

클릭 이벤트를 앵커에 바인딩하여 브라우저 기본 동작 대신 URL (www)을 요청하는 대신 클릭을 가로 채고 사용자 정의 코드 (새로 고침하지 않고 페이지 미리보기로드)를 실행할 수 있습니다. .myexample.com/item1)을 서버에서 가져옵니다.

뭔가 같은 :

$('a').click(function() { 

    /* Your code here. E.g... */ 

    $('#pages').animate({opacity: '0.0'},function(){ 
     $("a[data-role='Home']").parent().addClass('active'); 
     $.get('Home/index.html', function(response){ 
      $('#pages').html(response); 
      scrollOnTop(); 
      $('#pages').animate({opacity: '1.0'}); 
     }) 
    }); 

    // Returning false prevents browser default behaviour 
    // Some people don't like it - see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ 
    return false; 

});