私のajaxウェブサイトの特定のページを読み込むためにpushstateを使う

Question

私はソーシャルネットワーク共有プラグインを自分のウェブサイトにインストールしています。私はリンクを共有することができます。 pushstateを押してブラウザのURLを変更して、共有するときにウェブサイトの各特定のページを読み込みます。私のajaxコードを使用して私は1つだけのURLとthats https://trillumonopoly.comを持っています。イムはプッシュステートに慣れていませんが、イブはそれが何を探しているのかを読んでいます。

たとえば、自分のウェブサイトで音楽のページをソーシャルに共有したい場合、ユーザーがリンクをクリックすると、その特定のページがdivにロードされた状態でウェブサイトのインデックスページに移動します。私はどうしますか？

HERESに私のjqueryの/ Ajaxコード

$(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を提供するようにApacheに指示する必要があります。

document.readyでは、URL（document.location.pathname）を確認し、パスが何であるかに応じてコンテンツを読み込む必要があります。

インデックス・ページには、常にここで

は、あなたがこれを行うことができる方法のいくつかの簡単なサンプルコードでURL内のパス名に基づいて実際のコンテンツで置き換えられますロードスピナーが表示されるはずです：

//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'))); 
    }); 
});