ProgramingTip

페이지를 다시로드하지 않고 javascript / jQuery를 사용하여 URL 또는 쿼리를 업데이트하는 방법은 무엇입니까?

bestdevel 2020. 10. 21. 21:13
반응형

페이지를 다시로드하지 않고 javascript / jQuery를 사용하여 URL 또는 쿼리를 업데이트하는 방법은 무엇입니까?


페이지를 다시로드하지 않고 프로그래밍 방식으로 URL을 업데이트하는 방법이 다시 있습니까?

편집 : 게시물의 제목에 추가했습니다. 페이지를 다시로드하고 싶지 않다는 것을 다시하고 싶습니다.


예- 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은 사이트에서 사용자가 어디에 있는지 존재합니다. 약간의 내용을 변경하지 않고 변경하면 혼란스러워됩니다.


예, 아니오. 모든 일반적인 웹 브라우저에는이를 방지하기위한 보안 조치가 있습니다. 목표는 사람들이 웹 사이트의 박물관을 만들지.하고 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


당신이 사용할 수있는 :

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

사용하다

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

페이지 를 다시로드하지 않고 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);
}

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

그러나 document.location은 window.location과 사실상 동일하지만 window.location은 이전 브라우저에서 조금 더 지원 선호하는 선택 일 수 있습니다.

자세한 정보는 이것이 확인하십시오.

JavaScript에서 window.location과 document.location의 차이점은 무엇입니까?


리디렉션을 방지하기 위해 해시 태그로 URL 변경을 접두사로 지정합니다.

이 리디렉션

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

리디렉션되지 않습니다.

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

일반 자바 펼쳐 : document.location = 'http://www.google.com';

이렇게하면 브라우저가 새로 고침됩니다. 페이지를 다시로드하지 않고 권장 검색 기록을 구현하기 위해 URL을 업데이트해야하는 경우 사용하는 것이 좋습니다. 이 경우 jQuery.hashchange를 볼 수 있습니다.


좀 더 구체적이어야합니다. 'URL 업데이트'란 무엇을 의미합니까? 그것은 확실히 가능한 다른 페이지로 자동으로 이동하는 것을 의미 할 수 있습니다.

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


새 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.hash쿼리 용

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

반응형