AJAX를 사용하여 컨텐츠로드하기. 방문시 전체 페이지 유지

Question

나는 지금 아주 며칠 동안 노력하고 연구 해왔다.

기본적으로 내가 달성하고자하는 것은 페이지 간 AJAX입니다. 페이지에서 AJAX/JQuery로 파일을로드하는 방법을 알고 있지만 조금 다릅니다.

두 페이지가 있다고 가정 해 보겠습니다.

는 Index.php는 Info.php

내가 (메인 컨텐츠 등) Info.php에 Index.php는에서 링크, 특정 DIV의 내용 만 클릭

교체해야합니다.

그러나 Index.php를 방문하면 헤더가있는 전체 페이지가 표시됩니다. (분명히) 그러나 Info.php를 방문하면 머리글과 모든 내용으로 전체 페이지를 가져오고 싶습니다 (내용 DIV의 차이 만 있음).

웹 사이트에서이 내용을 많이 볼 수 있지만 작동 방식을 찾거나 파악할 수없는 것 같습니다.

기본적으로 두 페이지간에 다른 모든 것을 바꾸는 것과 같을 수도 있습니다. (델타 로딩과 마찬가지로)

이 모든 작업의 ​​주된 목적은 페이지로드간에 음악 플레이어를 유창하게 계속 유지하는 것입니다.

누구나 이것이 어떻게 작동하는지 또는 올바른 방향으로 나를 밀어 붙일 수 있는지 설명 할 수 있습니까?

감사합니다. :)

Answer 1

는이

처럼 뭔가를 할 수 #container 사업부 페이지의 당신의 모든 내용이

탐색 링크를 보이는 것으로 가정 JQuery와

와 자바 스크립트 코드에

<a href="index.php" class="ajax_link">Home<a> 
<a href="infor.php" class="ajax_link">Information<a> 

같은

function ajaxPageLoader(request_url) { 
    console.log("Content loading from : "+request_url); 
    $("#container").load(request_url+" #container", function() { 
     window.history.pushState({}, "", request_url); // update current url in browser. 
     console.log("Content loaded"); 
    }); 
} 

function changeState(state) { 
    if(state !== null) { // initial page 
     ajaxPageLoader(state.url); 
    } 
} 

위임 된 이벤트 핸들입니다. 어 on() 방법을 사용하여

$(document).ready(function(){ 
    $(document).on('click','.ajax_link',function(){ 
     ajaxPageLoader($(this).attr('href')); 
     return false; 
    }); 
}); 
// back button event 
$(window).on("popstate", function(e) { 
    changeState(e.originalEvent.state); 
    return false; 
});