페이지를 다시로드하지 않고 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
쿼리 용
'ProgramingTip' 카테고리의 다른 글
git : "branchname"과 "refs / head / branchname"의 차이점 (0) | 2020.10.21 |
---|---|
ID 또는 클래스가없는 요소를 찾기위한 XPath (0) | 2020.10.21 |
Android Studio의 기존 프로젝트에 새 활동을 추가하는 방법은 무엇입니까? (0) | 2020.10.21 |
CSV 파일에서 헤더가있는 PostgreSQL 테이블로 CSV 파일을 복사하는 방법은 무엇입니까? (0) | 2020.10.21 |
Kotlin에서 추상 클래스의 인스턴스 만들기 (0) | 2020.10.21 |