JavaScript를 사용하여 새 페이지를 로드하지 않고 브라우저에서 URL 변경

JavaScript를 사용하여 새 페이지를 로드하지 않고 브라우저에서 URL 변경

JavaScript 액션은 현재 페이지에 영향을 줄 수 있지만 사용자가 새로고침 또는 북마크를 누르면 새 URL이 사용되도록 브라우저의 URL을 변경하는 방법을 알려주세요.

원래 URL을 다시 불러오는 버튼도 있으면 좋겠습니다.

URL에 JavaScript 상태를 기록하려고 합니다.

history.pushState ★★★★★★★★★★★★★★★★★」history.popState다만, 「구」의 방법은, fragment ID 를 설정하는 것으로, 페이지 새로고침의 원인이 되지 않습니다.

개념은 '이렇게 하다', '이렇게 하다', '이렇게 하다'를 예요.window.location.hash필요한 상태 정보를 포함하는 값으로 속성을 지정한 다음 window.onhashchange 이벤트를 사용하거나 지원하지 않는 이전 브라우저의 경우onhashchange, 3.6 )는합니다(IE < 8, Firefox < 3.6 ） setInterval이데올로기 때문에또한 페이지 로드 시 해시 값을 확인하여 초기 내용을 설정해야 합니다.

jQuery를 사용하는 경우 브라우저가 지원하는 방법을 사용하는 해시 변경 플러그인이 있습니다.다른 도서관에도 플러그인이 있을 거예요.

주의할 점은 페이지 상의 ID와 충돌하는 것입니다.이는 브라우저가 일치하는 ID를 가진 모든 요소로 스크롤하기 때문입니다.

HTML 5 에서는, 기능을 사용합니다.예를 들어 다음과 같습니다.

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

및 a href:

<a href="#" id='click'>Click to change url to bar.html</a>

---

는, 「URL」을 합니다.history.replaceState★★★★★★ 。

window.location을 클릭합니다.href에는 현재 URL이 포함되어 있습니다.이 URL에서 읽고, 거기에 추가하고, 치환할 수 있습니다.이것에 의해, 페이지가 새로고침 되는 일이 있습니다.

javascript 상태를 URL에 기록하고 싶은 경우 페이지를 새로고침하지 않고 현재 URL에 추가하고 # 뒤에 javascript를 추가하여 현재 URL에 저장된 상태를 포함하는지 확인합니다.

# 가 아닌 ? 를 사용하면 페이지의 새로고침이 강제됩니다.단, 로드 시 저장된 상태를 해석하기 때문에 실제로는 문제가 되지 않을 수 있습니다.그러면 앞으로 버튼과 뒤로 버튼도 올바르게 동작합니다.

만약 그렇다면 엄청난 보안 문제가 될 것이기 때문에, 저는 이것이 불가능하다고 강하게 의심하고 싶습니다.예를 들어 은행 로그인 페이지와 같은 페이지를 만들어 주소 표시줄의 URL을 실제 은행과 똑같이 만들 수 있습니다!

아마도 당신이 왜 이걸 하고 싶은지 설명한다면, 사람들은 다른 방법을 제안할 수 있을 것이다.

[2011년 편집 : 2008년 이 답변을 작성한 이후 URL을 같은 출처에서 수정할 수 있는 HTML5 기술에 대한 자세한 내용이 공개되었습니다]

jQuery에는 브라우저의 URL을 변경하기 위한 jQuery-pusher라는 훌륭한 플러그인이 있습니다.

pushState함께 할 수 .jQuery 음 、 음음 、 and and and and 。

history.pushState(null, null, $(this).attr('href'));

예:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

JavaScript만 사용 history.pushState()XMLHttpRequest HTTP를 사용합니다.

예:

window.history.pushState("object", "Your New Title", "/new-url");

pushState() 메서드:

pushState() 오브젝트,무시) 및 의 3가지 파라미터를 이대해 다음 3가지 파라미터 각각에 대해 자세히 알아보겠습니다.

1. state object :상태 오브젝트는 JavaScript 오브젝트로, 이 오브젝트는 에 의해 작성된 새로운 이력 엔트리와 관련되어 있습니다.pushState()사용자가 새로운 상태로 이동할 때마다 팝스테이트 이벤트가 발생하며 이벤트의 상태 속성에는 이력 엔트리의 상태 오브젝트 복사본이 포함됩니다.

   상태 개체는 직렬화할 수 있는 모든 개체입니다.Firefox는 상태 객체를 사용자의 디스크에 저장하기 때문에 사용자가 브라우저를 재시작한 후 복원할 수 있으므로 상태 객체의 일련화된 표현에 640,000자의 크기 제한을 두고 있습니다.보다 더 큰 스테이트 를 에 pushState()이치노session Storage 또 / local Storage 。

2. title : Firefox는 현재 이 파라미터를 무시하지만 향후 사용할 가능성이 있습니다.여기에 빈 문자열을 전달하면 메서드가 나중에 변경되지 않도록 안전합니다.또는 이동할 주에 대한 짧은 제목을 전달할 수도 있습니다.

3. URL - 이 파라미터에 의해 새로운 이력 엔트리의 URL이 지정됩니다.브라우저는 호출 후 이 URL을 로드하지 않습니다.pushState()단, 사용자가 브라우저를 재시작한 후 등 나중에 URL 로드를 시도할 수 있습니다.새 URL은 절대 URL일 필요는 없습니다. 상대적인 경우 현재 URL을 기준으로 해결됩니다.새 URL은 현재 URL과 같은 원본이어야 합니다. 그렇지 않으면pushState()예외가 발생합니다.하지 않으면URL로 됩니다.

브라우저 보안 설정으로 인해 사용자가 표시된 URL을 직접 수정할 수 없습니다.이로 인해 발생할 수 있는 피싱 취약성을 생각할 수 있습니다.

페이지를 변경하지 않고 URL을 변경할 수 있는 신뢰성 높은 방법은 내부 링크 또는 해시를 사용하는 것입니다.예를 들어 다음과 같습니다.http://site.com/page.html 가 http://site.com/page.html#item1 가 됩니다.이 기술은 히잡(AJAX+역사를 보존하는 것)에 자주 사용됩니다.

이 작업을 수행할 때 종종 해시를 href로 사용하는 액션에 대한 링크를 사용한 다음 요청된 해시를 사용하는 jquery를 사용하여 클릭 이벤트를 추가하여 액션을 결정하고 위임합니다.

그것이 당신이 올바른 길로 인도되기를 바랍니다.

이것을 처리할 수 있는 Yahoo YUI 컴포넌트(브라우저 이력 매니저)가 있습니다.http://developer.yahoo.com/yui/history/

Facebook의 포토갤러리에서는, URL 의 #해시를 사용하고 있습니다.다음은 URL의 예를 제시하겠습니다.

'다음'을 클릭하기 전에:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

'다음'을 클릭한 후:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

해시방(#!) 뒤에 새로운 URL이 표시됩니다.

좀 더 간단한 대답을 드리자면

window.history.pushState(null, null, "/abc")

이것이 추가될 것이다./abc브라우저 URL의 도메인 이름 뒤에 있습니다. 이 코드를 복사하여 브라우저 콘솔에 붙여넣기만 하면 URL이 "https://stackoverflow.com/abc"로 바뀝니다.

jquery 플러그인 http://www.asual.com/jquery/address/이 있습니다.

이게 당신이 필요한 것 같아요.

있는 - ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.history.replaceState() 기능은 다음과 기능을 합니다. -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

페이지를 새로고침하지 않습니다.javascript 이벤트와 함께 사용할 수 있습니다.

페이지 내의 부모 패스가 같으면 새로운 것밖에 추가되지 않을까 생각하고 있습니다.

사용자가 해 보겠습니다.http://domain.com/site/page.html가 할 수 있어요.location.append = new.html가 뜨게다가 되다.http://domain.com/site/page.htmlnew.html브라우저에서도 변경되지 않습니다.

parameter를 할 수 location.get = me=1&page=1.

원래 는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★http://domain.com/site/page.html?me=1&page=1리프레시 되지 않습니다.

#의 문제는 해시 변경 시 데이터가 캐시되지 않는다는 것입니다(적어도 캐시되지 않은 것 같습니다).즉, 새로운 페이지가 로드될 때마다 Ajax 이외의 페이지의 뒤로 및 앞으로 버튼을 누르면 데이터를 캐시할 수 있으므로 데이터를 새로고침하는 데 시간을 할애할 필요가 없습니다.

제가 본 바로는 야후 역사 건은 이미 모든 데이터를 한 번에 로드하고 있습니다.아약스 ㅇㅇㅇㅇ가...div는, 다른 방식의 시간외 처리를 위해서 사용됩니다.데이터는 이력 상태별로 저장되지 않습니다.

코드는 다음과 같습니다.

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

및 액션:

setLocation('http://example.com/your-url-here');

및 예시

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

이상입니다:)

지금까지의 성공 사례:

location.hash="myValue";

더하면 돼요.#myValue 할 한 Load URL을할 수 .location.hash관련 값을 확인합니다.해 주세요.#에서 location.hash를 들어 예를 들어.

var articleId = window.location.hash.replace("#","");

언급URL : https://stackoverflow.com/questions/136458/change-the-url-in-the-browser-without-loading-the-new-page-using-javascript