페이지를 다시로드하지 않고 쿼리 문자열 수정
사진 갤러리를 만들고 있는데 사진을 검색 할 때 쿼리 문자열과 제목을 변경할 수 있기를 원합니다.
내가 찾고있는 동작은 연속 / 무한 페이지의 일부 구현에서 자주 볼 수 있습니다. 여기에서 쿼리 문자열을 아래로 스크롤하는 동안 페이지 번호 ( http://x.com?page=4 ) 등이 계속 증가합니다 . 이론상 간단하지만 주요 브라우저에서 안전한 것을 원합니다.
이 훌륭한 게시물을 찾았고 와 함께 예제를 따르려고 window.history.pushstate
했지만 저에게 효과가없는 것 같습니다. 그리고 브라우저 기록을 수정하는 데는 신경 쓰지 않기 때문에 이상적인지 확실하지 않습니다.
사진이 변경 될 때마다 페이지를 다시로드하지 않고 현재보고있는 사진을 북마크하는 기능을 제공하고 싶습니다.
다음은 쿼리 문자열을 수정하는 무한 페이지의 예입니다. http://tumbledry.org/
UPDATE 는 다음 방법을 찾았습니다.
window.location.href = window.location.href + '#abc';
그것은 나를 위해 작동하는 것처럼 보이지만 나는 새로운 크롬을 사용하고 있습니다. 이전 브라우저에서 문제가 발생할 수 있습니까?
해시 수정을 찾고 있다면 솔루션이 정상적으로 작동합니다. 그러나 쿼리를 변경하려면 말했듯이 pushState를 사용할 수 있습니다. 다음은이를 올바르게 구현하는 데 도움이 될 수있는 예입니다. 나는 테스트했고 잘 작동했습니다.
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
window.history.pushState({path:newurl},'',newurl);
}
페이지를 다시로드하지는 않지만 URL 쿼리 만 변경할 수 있습니다. 프로토콜이나 호스트 값을 변경할 수 없습니다. 물론 HTML5 History API를 처리 할 수있는 최신 브라우저가 필요합니다.
자세한 내용은:
http://diveintohtml5.info/history.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
다음 JavaScript 라이브러리를 성공적으로 사용했습니다.
https://github.com/balupton/jquery-history
HTML5 히스토리 API와 이전 브라우저에 대한 대체 방법 (# 사용)을 지원합니다.
이 라이브러리는 본질적으로`history.pushState '주위의 폴리 필입니다.
Fabio의 대답을 바탕으로 나는이 질문에 걸림돌이되는 사람에게 유용 할 두 가지 기능을 만들었습니다. 이 두 함수를 insertParam()
사용하면 키와 값을 인수로 사용하여 호출 할 수 있습니다 . URL 매개 변수를 추가하거나 동일한 키를 가진 쿼리 매개 변수가 이미 존재하는 경우 해당 매개 변수를 새 값으로 변경합니다.
//function to remove query params from a URL
function removeURLParameter(url, parameter) {
//better to use l.search if you have a location/link object
var urlparts= url.split('?');
if (urlparts.length>=2) {
var prefix= encodeURIComponent(parameter)+'=';
var pars= urlparts[1].split(/[&;]/g);
//reverse iteration as may be destructive
for (var i= pars.length; i-- > 0;) {
//idiom for string.startsWith
if (pars[i].lastIndexOf(prefix, 0) !== -1) {
pars.splice(i, 1);
}
}
url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
return url;
} else {
return url;
}
}
function insertParam(key, value) {
if (history.pushState) {
// var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
var currentUrl = window.location.href;
//remove any param for the same key
var currentUrl = removeURLParameter(currentUrl, key);
//figure out if we need to add the param with a ? or a &
var queryStart;
if(currentUrl.indexOf('?') !== -1){
queryStart = '&';
} else {
queryStart = '?';
}
var newurl = currentUrl + queryStart + key + '=' + value
window.history.pushState({path:newurl},'',newurl);
}
}
Fabio의 답변을 개선하고 페이지를 다시로드하지 않고 URL 문자열에 사용자 정의 키를 추가하는 기능을 만들고 싶습니다.
function insertUrlParam(key, value) {
if (history.pushState) {
let searchParams = new URLSearchParams(window.location.search);
searchParams.set(key, value);
let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
window.history.pushState({path: newurl}, '', newurl);
}
}
그렇다면 히스토리 API는 정확히 당신이 찾고있는 것입니다. 레거시 브라우저도 지원하려면 브라우저가 히스토리 API를 제공하지 않는 경우 URL의 해시 태그 조작으로 대체되는 라이브러리를 찾으십시오.
참고 URL : https://stackoverflow.com/questions/10970078/modifying-a-query-string-without-reloading-the-page
'Programing' 카테고리의 다른 글
SQL Server에서 요일 가져 오기 (0) | 2020.09.09 |
---|---|
Python에서 Dictwriter로 출력 할 때 CSV 파일에 각 데이터 줄 사이에 빈 줄이있는 이유는 무엇입니까? (0) | 2020.09.09 |
PostgreSQL 데이터베이스 복원시 권한 문제를 해결하는 방법 (0) | 2020.09.09 |
앱 매니페스트에 Google Play 서비스 버전을 추가 하시겠습니까? (0) | 2020.09.09 |
제네릭 유형이 문자열인지 테스트하는 가장 좋은 방법은 무엇입니까? (0) | 2020.09.09 |