일반 링크가 아닌 Ajax를 통해 자동으로 일반 링크를 로드하는 방법이 있나요?

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

문제

제가 이것을 잘 설명하지 못했습니다.

하지만 내 말은, 모든 링크에 수동으로 이 작업을 수행하는 대신 'loadpage('whatever.php'); 함수를 통해 DIV 요소의 페이지 콘텐츠를 로드하는 ajax 스크립트가 있는 경우 다음과 같습니다. 해당 ajax 함수를 통해 모든 일반 링크를 자동으로 로드하는 스크립트를 사용하는 방법이 있습니까?

Facebook과 마찬가지로 프로필은 ajax를 통해 로드되지만 코드를 보면 프로필에 대한 일반 링크만 있습니다.

건배!

도움이 되었습니까?

해결책

물론 jQuery를 사용하면 가능합니다.

이 스크립트는 문서를 살펴보고 모든 앵커 요소를 찾아 각각의 클릭 이벤트에 이벤트 핸들러를 바인딩합니다.앵커 요소를 클릭하면 이벤트 핸들러가 href 속성을 찾아 해당 페이지를 #targetDiv에 로드합니다(물론 이 div를 원하는 대로 호출할 수 있음).

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  $("a").click(function() {
    $("#targetDiv").load(($(this).attr("href") + " body");
    return false;
  });
});
</script>

...

<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>

다른 팁

이에 jQuery를 사용할 수 있습니다 (질문을 올바르게 이해하는 경우).

먼저 다음과 같이 함수로드 페이지 ()를 만들 수 있습니다.

function loadpage(divId, url) {
    $('#' + divId).load(url);

    return false;
}

.LOAD ()는 모든 브라우저에서 지원되지 않습니다. .load () 없이이 작업을 수행하려면 .get ()를 확인할 수 있습니다. .load ()에 대한 자세한 내용은 http://docs.jquery.com/ajax/load

나는 그것이 다음과 같이 갈 것이라고 가정합니다.

$(document).ready(function(){
    $("a").click(function(){
        $("body").load($(this).attr("href") + " body");
        return false;
    });
});

이것은 모든 것을 만들 것입니다 <a> 페이지의 태그는 HTML 문서를 다운로드하는 함수를 호출합니다. href 태그의 속성, 바디 태그를 벗기고 현재 페이지의 본문 태그의 내용을 새 바디 태그의 내용으로 바꾸십시오. 이런 식으로 JavaScript 없이이 작업을 수행하고 기존 사이트에 통합하는 것이 더 쉽습니다.

사용하려면 이것을 a에 넣습니다 <script> 메인 페이지의 헤드 또는 외부 JS 파일에 태그를 지정하십시오.

그러나이 코드는의 내용 만 업데이트합니다. <body> 태그, 헤드 (제목 태그 포함)는 손대지 않았습니다. 이와 같은 것들을 업데이트하려면 추가 코드를 추가해야 할 수도 있습니다.

단순하고 멋지다. 이것 좀 봐:Bjax

용법:

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

마지막으로, 이것을 HTML의 머리에 포함 시키십시오 :

$('a').bjax();

더 많은 설정을 보려면 여기에서 확인 데모 : 여기를 참조하십시오.Bjax 데모

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top