Web 2.0ナビゲーションシステムを実装するための最良の方法

StackOverflow https://stackoverflow.com/questions/3251263

質問

今ここに私の状況です：私はCMSを作っています。リンクをクリックすると、ページがAjaxを使って動的にロードするようにします。リンク内の問題！

アドレスバーのアドレスをリアルタイムで変更する唯一の方法は、アンカータグを使用することです。しかし、PHPはアンカータグを取得しません。したがって、PHPを使用してサイト負荷にページコンテンツをロードできません。 また、クエリ文字列を使用してページをロードする場合は、ページをリロードするため、リンクをクリックしてクエリ文字列をアドレスバーに更新できませんでした。

JavaScriptはアドレスを確認し、Cookieでアンカータグを保存してページをリロードすることができると思いますが、そのような長さに行く必要はありません。

誰もがこの問題に対する解決策を知っていますか？

役に立ちましたか？

解決

似たような問題はありませんでした、そして私は以下の解決策を思いついた。

あなたのURLは、JS無効ユーザーのために機能するために実際のページを指すべきです。クリックハンドラはAjax要求を処理する必要があります。ハッシュにはURL、および要求の種類を示すための&ajaxのような部分が含まれているはずです。

要求がAjaxからのものである場合は、単にコンテンツを送信します。そうでない場合は、コンテンツをヘッダーとフッターに囲み、フルサイトで応答します。

URLは、Ajaxが生成されたハッシュとリンクとしてそれらを使用してリンクしています。全体的なアイデアは基本的にあなたがFacebookで見ることができる行動の種類を模倣しています。

JavaScript 

// click handler for ajax links
function goToWithAjax(hash) {
  hash = hash.href ? hash.getAttribute("href", 2) : hash;
  ajax( hash, function( response ) {
    document.getElementById("content").innerHTML = response;
  });
  hash = ("#!/" + hash).replace("//","/");
  window.location.hash = hash;
  return false;
}
.

.htaccess 

auto_prepend_file = "prepend.php"  
auto_append_file  = "append.php"
. 

$url   = $_SERVER['REQUEST_URI'];
$parts = explode('#!', $url);
$hash  = isset($parts[1]) ? $parts[1] : false;

// redirect if there is a hash part
if ($hash) {
  header("Location: $hash");
}

// find out if it's an ajax request
$ajax = strstr($url, "&ajax");

// we need header if it's not ajax
if (!$ajax) {
  get_header();
}
.

append 

// we need footer if it's not ajax
if (!$ajax) {
  get_footer();
}
.

get_header（） 

function get_header() {

echo <<< END
<html>
<head></head>
<body>
<div id="page">
  <div id="header">
    <div id="logo"></div>
    <ul id="nav">menu...</ul>
  </div>
  <div id="content">
END;

}
.

get_footer（） 

function get_footer() {

echo <<< END
  </div> <!-- end of #content --->
  <div id="footer">(c) me</footer>
</div> <!-- end of #page --->
</body>
</html>
END;

}
.

他のヒント

I can see why you might want to load parts of the page with ajax. A whole page is rather pointless though.

A jQuery solution might be something like:

$(a.ajax_link).click(function(){
  var url = $(this).attr('href');
  $.ajax({
    url:url,
    success:function(data) {
      $('body').html(data);
      return false;
    }
  });
});

I have in no way tested that, but it should still work without javascript enabled.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top