웹 2.0 탐색 시스템을 구현하는 가장 좋은 방법

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

문제

이제는 내 상황이 있습니다 : 나는 CMS를 만들고 있습니다.링크를 클릭하면 페이지가 Ajax를 사용하여 동적으로로드 할 수 있습니다.링크의 문제!

주소 표시 줄에서 주소를 변경하는 유일한 방법은 앵커 태그를 사용하는 것입니다.그러나 PHP는 앵커 태그를 가져 오지 않으므로 PHP를 사용하여 사이트로드에서 페이지 컨텐츠를로드 할 수 없습니다. 그리고 쿼리 문자열을 사용하여 페이지를로드하는 경우 페이지를 다시로드하기 때문에 링크 클릭시 주소 표시 줄에서 쿼리 문자열을 업데이트 할 수 없습니다.

JavaScript가 주소를 확인하고 쿠키에 앵커 태그를 저장하고 페이지를 다시로드 할 수 있지만, 오히려 그러한 길이에 가지 않아도됩니다.

이 문제에 대한 해결책을 알고 있습니까?

도움이 되었습니까?

해결책

오래 전에 비슷한 질문이 있었다. 그리고 나는 다음의 해결책을 생각해 냈다.

URL은 JS 비활성화 된 사용자를 위해 작동하려면 실제 페이지를 가리켜 야합니다.클릭 핸들러는 AJAX 요청을 처리해야합니다.해시에는 URL이 포함되어야하며 요청의 유형을 나타내는 &ajax와 같은 부분을 포함해야합니다.

Ajax에서 요청이 발생하면 단순히 내용을 전송합니다.그렇지 않은 경우 콘텐츠를 머리글과 바닥 글에 묶어 전체 사이트로 응답하십시오.

URL은 Ajax 생성 해시에 연결되어 링크로 사용하여 작업해야합니다.전체 아이디어는 기본적으로 Facebook에서 볼 수있는 행동의 종류를 모방합니다.

자바 스크립트 

// 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"
.

prepend 

$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