Ajaxによるコンテンツの切替え–対策方法

コンテンツ(contentX.htmlと仮定)に直接アクセス
された場合、様々な対策法があるとは思うが、私は
次のようにすることにした。

  1. 直接アクセスされたかどうかを検知する。
  2. 直接アクセスされた場合、sessionStorageにcontentX.htmlを出力
  3. index.html(Ajaxを設定したページ)へリダイレクト
  4. sessionStorageを参照して、contentX.htmlをロード

1. の検知方法は、title 要素の存在有無で
判定している。ちょっと怪しい処理だが、自分には
問題がないので、これで良しとする。

この検知処理は全コンテンツに追加する必要がある。
外部ファイルとするので
<script src=”/my/directory/xxx.js></script>
のような1行をHTMLの末尾に追加するだけだが、量が多いので
中々大変な作業量になってしまう。
と言うことで、以前書いた
「ディレクトリにある全ソースの末尾に1行追加」
につながる訳で、これで一件落着。目出度し目出度し。

各コンテンツに追加したスクリプトは以下の通り。

// 直接このコンテンツをアクセスしたかのチェック
var x = document.getElementsByTagName("title");
if(x.length == 0){  // 直接アクセスした?
  // 直接アクセスした場合の処理
  var url = document.URL;      // このドキュメントのURL
  var arry = url.split("/");  // スラッシュで分割
  // リダイレクトするURLの生成
  var html = "/"+arry[arry.length - 3]+"/"+arry[arry.length - 2]+"/"+"index.html";
  if(sessionStorage){
    sessionStorage.setItem("AccessURL",arry[arry.length - 1]);
  }else{
    alert("セッションストレージが使用できません");
  }
  // index.htmlへリダイレクト
  location.href=html;
}

index.htmlのスクリプト。

$(document).ready(function(){

    init();
    
    // 左サイドメニューをクリック
    $("#leftcolumn a").click(function(){
      srcSet(this);
    });
    // a タグの"href"を読んで、取得した内容を #main に設定する
    $("#leftcolumn a").pjax("#main");

});

function init(){
  if(sessionStorage){
    // sessionStorageが設定されていれば、それを入力
    var html = sessionStorage["AccessURL"];
    if(!html){
      // 設定されていなければdefault.htmlを入力
      html = "default.html";
    }
  }else{
    alert("セッションストレージが使用できません");
  }
  $("#main").load(html);
  // アンカータグのデフォルト動作を抑止
  $("#leftcolumn a").click(function(event){
    event.preventDefault();
  });
  // 本文中のリンクをクリック(tryitbtnを除く)
  $("#main").on('click','a:not(.tryitbtn)',function(event){
    event.preventDefault();  // リンクの動作を抑止
    srcSet(this);
    var vhref = $(this).attr("href");
      // tile に設定する値を、左サイドメニューから取得
      var title = $("#leftcolumn a[href='"+vhref+"']").text();
      if(title != ""){
        $("title").text(title);
      }
    //}
  });
}
function srcSet(obj){
  document.title = $(obj).text();      // title を設定
  $("a[style]").removeAttr("style");  // Bold 設定を一旦削除
  var geturl = $(obj).attr("href");    // クリックされたメニューの href 属性値
  // クリックされたメニューを Bold に
  $("#leftcolumn a[href='"+geturl+"']").css("font-weight","bold");
  // HTML 本文のロード
  $.pjax({
    "url": geturl,
    "container": "#main"
  });
  $("html").scrollTop(0);  // 画面を先頭に戻す

}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください