2011-01-20 5 views
2

AJAXを使ったページナビゲーションのようなFacebookを実現しようとしています。私は次のコードを書いた。これはなぜこのように機能していないのですか?

if ("onhashchange" in window) { 
    window.onhashchange = function() { 
     locationChanged(window.location.href); 
    } 
} 
else { 
    var storedURL = window.location.href; 
    window.setInterval(function() { 
     if (window.location.href != storedURL) { 
      storedURL = window.location.href; 
      locationChanged(storedURL); 
     } 
    }, 250); 
} 

function locationChanged(e) { 
    if (window.location.href.include('#!')) { 
     var paths = window.location.href.split("#!"); 
     if (paths.length >= 2) { 
      var pos = paths.length - 1; 

      if (paths[pos].startsWith("/")) 
       paths[pos] = paths[pos].substr(1); 

      $('#holder').load(paths[pos]); 
     } 
    } 
    else { 
     if (window.location.href.endsWith('Index.html') 
     || !window.location.href.endsWith('.html')) { 
      //this is first page 
      redirect("Login.html"); 
     } 
    } 
} 

$(document).ready(function() { 
    if (window.location.href.endsWith('Index.html') 
    || !window.location.href.endsWith('.html')) { 
     //this is first page 
     redirect("Login.html"); 
    } 

    captureLinks(); 
}); 

function captureLinks() { 
    $('a').click(function(e) { 
     e.preventDefault(); 
     redirect($(this).attr("href")); 
    }); 
} 

function redirect(page) { 
    var path = page; 

    if (window.location.href.include('#!')) { 
     var paths = window.location.href.split("#!"); 

     var pos = paths.length - 2; 

     if (!paths[pos].endsWith("/")) 
      paths[pos] += "/"; 

     if (!page.startsWith("/")) 
      page = "/" + page; 

     path = paths[pos] + "#!" + page; 
    } 
    else { 
     if (path.endsWith(".html")) 
      path = window.location.href.trimEndTill("/"); 
     else 
      path = window.location.href; 

     if (!path.endsWith("/")) 
      path += "/"; 

     if (!page.startsWith("/")) 
      page = "/" + page; 

     path += "#!" + page; 
    } 

    window.location.href = path;  
} 

良い点は、コードが機能していることですが、問題はあります。 ...

http://localhost:8081/#!/Login.html

ありアプリのメインのエントリー・ページであるindex.htmlページがあると私は...と言う

http://localhost:8081/

を書くときには、それを変換します完璧です。しかし、私はそれを言うためにポイントすると...

http://localhost:8081/Index.html

それはそれを作っていた...

「Index.htmlと名付けページがないと404エラーを作成していた

http://localhost:8081/Index.html/#!/Login.html

/" Index.htmlを検出して、Login.htmlを指す前に最初に削除するようにコードを修正しました。コードは

http://localhost:8081/#!/Login.html

...としても、Index.htmlとして正しい結果が得られる。しかし問題はあるものの、それは$ .LOAD機能を使用して、体内でそのページ(login.htmlと)をロードすることはありません。どうかしましたか?私のコードが十分に効率的かどうかも知りたいですか?

+0

私は$ .string jqueryオブジェクトを利用していますので、include、startsWith、endsWithなどの関数を無視してください。 – Neutralizer

+0

ご存じのように、これはウェブサイトを構築するためのひどい方法です。 JSをオフにしている人は何もできません。 – meagar

+0

私はそれを知っています。これは今のところ問題ではありません。私はAJAXの少ないバージョンを持っています。 – Neutralizer

答えて

関連する問題