페이지를 다시 로드하지 않고 javascript/jQuery를 사용하여 URL 또는 쿼리 문자열을 업데이트하려면 어떻게 해야 합니까?

페이지를 다시 로드하지 않고 javascript/jQuery를 사용하여 URL 또는 쿼리 문자열을 업데이트하려면 어떻게 해야 합니까?

페이지를 다시 로드하지 않고 프로그램적으로 URL을 업데이트할 수 있는 방법이 있습니까?

편집: 게시글에 제목에 추가한 내용이 있습니다.페이지를 다시 로드하고 싶지 않다는 것을 분명히 하고 싶습니다.

한마디로 이야기할 수 없군요.모든 일반적인 웹 브라우저에는 이를 방지하기 위한 보안 조치가 있습니다.그 목적은 사람들이 웹사이트의 복제본을 만들지 못하도록 하고, URL을 정확하게 보이도록 변경한 다음, 사람들을 속이고 그들의 정보를 얻을 수 있도록 하는 것입니다.

그러나 일부 HTML5 호환 웹 브라우저는 사용자가 원하는 것과 유사한 용도로 사용할 수 있는 History API를 구현했습니다.

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

테스트를 해봤는데 잘 작동했어요.페이지를 다시 로드하지는 않지만 URL 쿼리만 변경할 수 있습니다.프로토콜이나 호스트 값을 변경할 수 없습니다.

자세한 내용:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

- -document.location = "http://my.new.url.com"

같은 방법으로 검색할 수도 있습니다.

var myURL = document.location;
document.location = myURL + "?a=parameter";

위치 개체에는 여러 가지 유용한 속성도 있습니다.

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

편집: document.location의 해시를 설정하는 것은 페이지를 다시 로드하는 것이 아니라, 페이지의 초점 위치를 변경하는 것입니다.업데이트 대상입니다.#myId를 사용하여 요소로 스크롤합니다.id="myId"에.id존재하지 않나요? 아무 일도 일어나지 않을 거라 믿나요?(단, 다양한 브라우저에서 확인 필요)

EDIT2: 단순한 코멘트가 아닌 명확히 하기 위해:페이지 변경 없이 전체 URL을 자바스크립트로 업데이트 할 수 없습니다. 보안 제한 사항입니다.그렇지 않으면 gmail처럼 보이도록 조작된 임의 페이지 링크를 클릭하고 즉시 URL을 www.gmail.com 로 변경하여 사용자의 로그인 정보를 훔칠 수 있습니다.
일부 브라우저에서는 도메인 뒤에 있는 부분을 변경하여 AJAX 스타일의 일에 대처할 수 있지만, 이미 Osiris에 의해 링크되어 있습니다.게다가, 할 수 있다 하더라도 아마 이렇게 해서는 안 될 것입니다.URL은 사용자가 사용자 사이트의 위치를 알려줍니다.페이지 내용을 변경하지 않고 변경하면 조금 혼란스러워집니다.

다음을 사용할 수 있습니다.

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)

사용하다

window.history.replaceState({}, document.title, updateUri);

페이지를 다시 로드하지 않고 URL을 업데이트하려면 다음과 같이 하십시오.

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

페이지를 다시 로드하지 않고 쿼리 문자열을 제거하려면 다음과 같이 하십시오.

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}

새 URL 개체를 정의하고 현재 URL을 할당한 다음 해당 URL 개체에 매개 변수를 추가한 다음 브라우저 상태로 푸시합니다.

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);

네.

document.location이 일반적인 방법입니다.

그러나 document.location은 window.location을 제외하고 window.location과 효과적으로 동일합니다. window.location은 이전 브라우저에서 조금 더 많이 지원되므로 preferable한 선택일 수 있습니다.

자세한 내용은 SO에서 이 스레드를 확인하십시오.

자바스크립트에서 window.location과 document.location의 차이점은 무엇입니까?

URL 변경을 해시태그로 미리 지정하여 리디렉션을 방지합니다.

리디렉션됩니다.

location.href += '&test='true';

이것은 리디렉션되지 않습니다.

location.href += '#&test='true';

일반 자바스크립트: document.location = 'http://www.google.com ';

이렇게 하면 브라우저 새로 고침이 발생합니다. 페이지를 다시 로드하지 않고 검색 기록을 구현하기 위해 URL을 업데이트해야 하는 경우 해시를 사용하는 것을 고려하십시오.이 경우 jQuery.hash change를 조사하는 것이 좋습니다.

좀 더 구체적으로 말씀해 주셔야 합니다.'URL 업데이트'란 무엇을 의미합니까?자동으로 다른 페이지로 이동하는 것을 의미할 수 있으며, 이는 확실히 가능합니다.

페이지를 다시 로드하지 않고 주소 표시줄의 내용만 업데이트하려면 페이지를 다시 로드하지 않고 URL 수정을 참조하십시오.

예 -document.location.hash문의용으로

언급URL : https://stackoverflow.com/questions/12508225/how-do-we-update-url-or-query-strings-using-javascript-jquery-without-reloading