pushstate를 사용하여 아약스 웹 사이트의 특정 페이지를로드하십시오.

Question

소셜 네트워크 공유 플러그인을 설치하고 있습니다. 링크를 공유 할 수 있습니다 ... 주 색인 링크 .. 어떻게 사용합니까? pushstate를 사용하면 공유 할 때 웹 사이트의 각 특정 페이지를로드하도록 브라우저의 URL을 변경합니다. 내 아약스 코드를 사용하여 하나의 URL과 그게 전부 https://trillumonopoly.com입니다. 임씨는 푸시 스테이트에 익숙하지 않지만 ive는 그것이 무엇을 찾고 있는지 읽었다.

예를 들어 내 웹 사이트에서 음악 용 페이지를 공유하고 싶을 때 사람들이 링크를 클릭하면 특정 페이지가 div에로드 된 상태로 내 웹 사이트 색인 페이지로 연결됩니다. 나는 그것을 어떻게 할 것인가?

을 heres 내 JQuery와/아약스 코드

$(document).ready(function() { 
    loadMainContent('main'); 

    $('body').delegate('.navMenu', 'click', function (event) { 
     event.preventDefault(); 
     loadMainContent($(this).attr('href')); 
    }); 
}); 

function loadMainContent(page) { 
    $('#main').load('pages/' + page + '.php'); 
} 

Answer 1

이있는 경우 yoursite/someroute 같은 URL이 다음은 not found 오류가 발생합니다. 따라서 rewrite을 사용하는 경로에 대해 index.php를 제공하도록 아파치에 지시해야합니다.

document.ready에서 URL (document.location.pathname)을 확인하고 경로가 무엇인지에 따라 내용을로드해야합니다.

//if path is /contact then return object with the url to php content page 
// and title of the page 
const pathToPage = path => { 
    switch (path) { 
    case "/contact": 
     return { 
     url:"/contact.php" 
     ,title:"Contact" 
     ,path:path 
     }; 
    } 
} 
//when user navigates back and forward 
window.addEventListener(
    "popstate" 
    ,event => 
    //only set content, do not mess with history 
    onlyLoadmain(
     pathToPage(location.pathname) 
    ) 
); 
//load main content with or without messing with history 
const loadMainBuilder = (push)=>(page)=> { 
    //if page is undefined then path is not of known content 
    if(page!==undefined){ 
    if(push){ 
     //set the url 
     history.pushState(
     {}, 
     page.title 
     ,page.path 
    ); 
    } 
    document.title = page.title 
    //@todo: should show loading here 
    //$('#main').html(loading); 
    $('#main').load(
     'pages/' + page.url + '.php' 
    ); 
    } 
} 
const loadMainAndPush = loadMainBuilder(true); 
const onlyLoadmain = loadMainBuilder(false); 
//... other code 
$(document).ready(function() { 
    //load the content of current page 
    // when user gets a url in their email like yoursite/contact the 
    // apache rewrite rule will serve index.php but main content is 
    // showing loading untill your code actually replaces it with something 
    onlyLoadmain(pathToPage(location.pathname)); 

    $('body').delegate('.navMenu', 'click', function (event) { 
     event.preventDefault(); 
     //the element clicked should have href with the path, not the php file path 
     //so /contacts not /pages/contacts.php 
     loadMainAndPush(pathToPage($(this).attr('href'))); 
    }); 
}); 

:

인덱스 페이지가 항상 URL을 여기에

에서 경로 이름에 따라 실제 내용으로 대체됩니다 로딩 스피너를 표시해야하는 것은 당신이 할 수있는 방법에 대한 몇 가지 간단한 예제 코드입니다