programing

새로 고침 트리거 없이 window.location 변경

testmans 2023. 9. 12. 19:53
반응형

새로 고침 트리거 없이 window.location 변경

GET 요청서를 제출하는 AJAX 양식이 있습니다.이들은 모두 GET 요청이므로 쉽게 북마크할 수 있어야 합니다.가급적이면 Ajax를 요청하고 화면을 업데이트한 다음 window.location을 업데이트합니다.href가 새 페이지의 URL이 됩니다.

안타깝게도 페이지가 다시 로드됩니다.제가 이걸 피할 방법이 없을까요?기본적으로 URL 바를 퍼말링크 바로 했으면 좋겠는데, 페이지 상태에 맞추려면 변경이 가능해야 합니다.

window.location.해시는 서버로 전송되지 않기 때문에 좋지 않습니다.

window.history.replaceState( {} , title, new_URL );

새로 고침 없이 현재 페이지 URL을 새 URL로 업데이트합니다.

인수:

  1. 데이터 개체(텍스트에 직렬화할 수 있는 개체여야 함)
  2. 변경된 창 URL의 새 제목
  3. 새로 고침 없이 변경할 URL

당신이 사용할 수 있는 것은window.onpopstate = function(event){...}사용자가 브라우저 기록을 앞뒤로 이동할 때 이벤트를 듣고 원하는 대로 변경합니다.

해시는 가야 할 길입니다.지적하신 것처럼 해시에 대한 변경 사항은 서버로 전송되지 않으므로 해시 업데이트뿐만 아니라 서버로 비동기 요청을 전송해야 합니다.

로, 이 로, 의 URL이라면http://server.com/page?id=4때, 가 AJAX 을 을 을 을 가 http://server.com/page?id=4을 , URL, 로 합니다.http://server.com/page#id=4.

또한 사용자가 다시 로드할 경우 상태를 복원할 수 있는 무언가가 있어야 합니다.이 작업은 일반적으로 해시 값 클라이언트 측을 읽고 해시 값이 나타내는 상태를 기반으로 비동기 요청을 서버로 전송하여 수행됩니다.

현재 브라우저에서 작동하는 작업을 하려면 변경할 수 없습니다.window.location.href

당신의 유일한 선택은 변화하는 것입니다.window.location.hash.

아약스 전화를 걸 때마다 그렇게 할 수 있습니다.jquery를 사용하는 경우 ajax 호출을 할 때마다 해시를 업데이트하는 함수를 바인딩할 수 있습니다.페이지 로드 시 해시를 검색하고(서버 측에서 해당 서버를 사용할 수 있다고 생각할 수 없음), 해시에 해당하는 상태로 페이지를 설정하려면 해당 호출을 수행해야 합니다.

-- 최신의

이제 history.pushState, history.replaceState and window.onpopstate : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries 에 대한 이 기능을 제공하는 API가 있습니다.

아직 어디에서나 사용할 수 있는 것은 아닙니다(http://caniuse.com/ #polyfill=history). 이 API를 사용할 수 있고 URL 해시를 사용하여 폴백할 경우 이 API를 사용할 수 있는 몇 가지 폴리필이 있습니다.

자바스크립트 라이브러리: https://github.com/browserstate/history.js 을 생각해 보십시오.

jquery를 사용합니다.아약스 요청을 할 수 있습니다.window.location은 url을 변경하기 위해 만들어졌기 때문에 사용할 수 없습니다.

언급URL : https://stackoverflow.com/questions/2494213/changing-window-location-without-triggering-refresh

반응형