페이지를 다시로드하지 않고 쿼리 문자열 수정

사진 갤러리를 만들고 있는데 사진을 검색 할 때 쿼리 문자열과 제목을 변경할 수 있기를 원합니다.

내가 찾고있는 동작은 연속 / 무한 페이지의 일부 구현에서 자주 볼 수 있습니다. 여기서 쿼리 문자열을 아래로 스크롤하는 동안 페이지 번호 ( 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

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 to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}

다음 JavaScript 라이브러리를 성공적으로 사용했습니다.

https://github.com/balupton/jquery-history

HTML5 히스토리 API와 이전 브라우저에 대한 대체 방법 (# 사용)을 지원합니다.

이 라이브러리는 본질적으로`history.pushState '주위의 폴리 필입니다.

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의 해시 태그 조작으로 대체되는 라이브러리를 찾으십시오.