ページをリフレッシュせずにダイナミックウェブサイトのページを読み込む

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」という名前のフォルダが存在するため、すべて破損しています... 一度、.htaccessファイルに次の行に沿って何かを追加します。RewriteRule

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

またはその変形です。

これはちょうどうんざりです。

Answer 1

私はあなたのコードが何をしているのか理解するのが少し難しいと思っています。 jsfiddleまたは同等のものが役立つかもしれません。

loadPageはURLハッシュが変更されたときにのみ実行されるようですか？また、hrefがwww.myexample.com/item1のアンカーではハッシュ変更が発生しません。

クリックイベントをアンカーにバインドして、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; 

});