js-history-hashchange

コンテンツ枠内を外部HTMLから呼び出して書き換える

ページ履歴も記録され、タイトルも同時に書き換える

...
view source

JavaScript

var pageChange = function(href){
  var dir = ('html/');
  var section = $('#page');
  $(window).scrollTop(0);

  var path = href.replace('#!/', '');

  path = path.replace('<', '&lt;').replace('>', '&gt;');
  if(!path || path === '/'){
    path = 'top.html';
  }
  //path = dir + path;
  console.log(path);
  section
    .load(dir + path, function(responseText, statusText, xhr){
      if(statusText === 'error'){
        section.empty();
        $('<h2>').text('404 Not Found').appendTo(section);
        $('<p>').text(path + ' は見つかりませんでした').appendTo(section);
      }

      var title = $('h2').eq(0).text();
      if(title){
        document.title = title;
      }
    });

  $(window).scrollTop(0);

}

var navChange = function(href){
  $('nav');
}

$(function(){

  pageChange(location.hash);

  $(document).on('click', 'a[href^="#!"]', function(){
    var href = $(this).attr('href');

    var state = href;
    if(history.pushState){
      history.pushState('', '', state);
    }

    console.log(location.hash);
    pageChange(href);
    navChange();
    return false;
  });

  $(window).on('hashchange', function(){
    console.log(location.hash);
    pageChange(location.hash);
    navChange();
  });


});

    console.log(location.hash);

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-history-hashchange/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。