내가 돌아온 후 동적 웹 페이지

Question

저는 비교적 새로운 웹 페이지 디자이너입니다. 현재 문제는 콘텐츠를 동적으로로드하고 기록을 수정하는 웹 페이지가 있다는 것입니다. 나는 웹 페이지가 페이지에서 페이지로 이동함에 따라 동적으로 컨텐트를 변경할 수 있지만, 웹 사이트를 떠나 역사를 다시 사용할 때 404 페이지를 찾을 수 없다. 이 상황을 해결할 방법이 있습니까?

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(function() { 
     $('#bodywrap').load('/common/index.php'); 

     $('ul#nav li a').click(function(e) { 
      $("#loading").show(); 
      href = $(this).attr("href"); 
      loadContent(href); 
      // HISTORY.PUSHSTATE 
      history.pushState('', '', href); 
      e.preventDefault(); 
     }); 
     $(window).bind('popstate', function(event) { 
      $("#loading").show(); 
      console.log("pathname: "+location.pathname); 
      loadContent(location.pathname); 
     }); 
    }); 
    function loadContent(url){ 
     // USES JQUERY TO LOAD THE CONTENT 
     $('#bodywrap').load('/common/'+url+'.php'); 
     $("#loading").hide(); 
     $('li').removeClass('active'); 
     $('a[href="'+url+'"]').parent().addClass('active'); 
    } 
}); 
</script> 

Answer 1

기본 웹 서버가 실제 문서를 찾지 않도록 해시를 사용합니다. 웹 서버 라우터가 먼저 실행됩니다. 또한 히스토리에서 다시로드하거나 직접 액세스 한 경우 올바른 내용을 가져 오려면로드시 해시를 확인해야합니다. 이 시도 : 귀하의 링크 해시해야합니다

$(document).ready(function(){ 
    $(function() { 
     $('#bodywrap').load('common/index.php'); 
     // Handle page load 
     loadHref(); 
     // handle link click 
     $('ul#nav li a').click(function(e) { 
      $("#loading").show(); 
      href = $(this).attr("href").substr(1); 
      loadContent(href); 
      // HISTORY.PUSHSTATE 
      history.pushState('', '', $(this).attr("href")); 
      e.preventDefault(); 
     }); 
     // Handle popstate 
     $(window).bind('popstate', function(event) { 
      $("#loading").show(); 
      loadHref(); 
     }); 
    }); 
    function loadContent(url){ 
     // USES JQUERY TO LOAD THE CONTENT 
     $('#bodywrap').load('common/'+url+'.php'); 
     $("#loading").hide(); 
     $('li').removeClass('active'); 
     $('a[href="'+url+'"]').parent().addClass('active'); 
    } 
    function loadHref() { 
     var href; 
     var loadHref = window.location.href; 
     if (loadHref.indexOf('#') > -1) { 
      href = loadHref.substr(loadHref.lastIndexOf('#') + 1); 
      loadContent(href); 
     } 
    } 
}); 

참고 :

<a href="#about">About</a> 

Answer 2

난 당신이 일부 변경이 코드를 사용할 수 있습니다 내 프로젝트 http://forkphp.com, 동일한 기능을 만들었습니다.

$(document).on('click','.changepage',function() { 

      // body... 
      prev = window.location; 
      next = "<?php echo $this->appBase(); ?>"+url; // url to load 
      var url = 'YOUR_URL'; 
      var target = $(this).attr('target'); // body in your case 
     $.ajax(
      { 
       url:"<?php echo $this->appBase(); ?>"+url, 
       method:'POST', 
       data:{terminal:1}, 
       dataType:'json', 
       beforeSend:function(){ 
       // $(target).disablify(); // show loader 
       }, 
       success:function(data) 
       { 

       $(target).html(data.html); 
       document.title = data.title; 
       // $(target).enablify(); // hide loader 
       window.history.pushState({"html":data.html,"pageTitle":"history"},"", "<?php echo $this->appBase(); ?>"+url); 
       } 
      }); 
     });