Sửa đổi chuỗi truy vấn mà không cần tải lại trang

Tôi đang tạo một thư viện ảnh và muốn có thể thay đổi chuỗi truy vấn và tiêu đề khi ảnh được duyệt.

Hành vi mà tôi đang tìm kiếm thường thấy với một số triển khai trang liên tục / vô hạn, trong khi bạn cuộn xuống chuỗi truy vấn vẫn tiếp tục tăng số trang ( http://x.com?page=4 ), v.v. Điều này nên về lý thuyết thì đơn giản, nhưng tôi muốn thứ gì đó an toàn trên các trình duyệt chính.

Tôi đã tìm thấy bài đăng tuyệt vời này và đang cố gắng làm theo ví dụ window.history.pushstate, nhưng điều đó dường như không hiệu quả với tôi. Và tôi không chắc liệu nó có lý tưởng hay không vì tôi không thực sự quan tâm đến việc sửa đổi lịch sử trình duyệt.

Tôi chỉ muốn có thể cung cấp khả năng đánh dấu ảnh hiện đang xem mà không cần tải lại trang mỗi khi ảnh được thay đổi.

Dưới đây là một ví dụ về trang vô hạn sửa đổi chuỗi truy vấn: http://tumbledry.org/

UPDATE đã tìm thấy phương pháp này:

window.location.href = window.location.href + '#abc';

nó có vẻ hoạt động với tôi, nhưng tôi đang sử dụng chrome mới .. nó có thể sẽ gây ra một số vấn đề với các trình duyệt cũ hơn?

Nếu bạn đang tìm kiếm sửa đổi Hash, giải pháp của bạn hoạt động tốt. Tuy nhiên, nếu bạn muốn thay đổi truy vấn, bạn có thể sử dụng pushState, như bạn đã nói. Đây là một ví dụ có thể giúp bạn triển khai nó đúng cách. Tôi đã thử nghiệm và nó hoạt động tốt:

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

Nó không tải lại trang mà chỉ cho phép bạn thay đổi truy vấn URL. Bạn sẽ không thể thay đổi giao thức hoặc các giá trị máy chủ. Và tất nhiên, nó yêu cầu các trình duyệt hiện đại có thể xử lý API Lịch sử HTML5.

Để biết thêm thông tin:

http://diveintohtml5.info/history.html

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

Dựa trên câu trả lời của Fabio, tôi đã tạo ra hai hàm có thể hữu ích cho bất kỳ ai gặp phải câu hỏi này. Với hai hàm này, bạn có thể gọi insertParam()với khóa và giá trị làm đối số. Nó sẽ thêm tham số URL hoặc, nếu một tham số truy vấn đã tồn tại với cùng một khóa, nó sẽ thay đổi tham số đó thành giá trị mới:

//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);
    }
}

Tôi đã sử dụng thư viện JavaScript sau với thành công lớn:

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

Nó hỗ trợ API lịch sử HTML5 cũng như một phương pháp dự phòng (sử dụng #) cho các trình duyệt cũ hơn.

Thư viện này thực chất là một polyfill xung quanh `history.pushState '.

Tôi muốn cải thiện câu trả lời của Fabio và tạo một hàm thêm khóa tùy chỉnh vào chuỗi URL mà không cần tải lại trang.

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);
    }
}

Sau đó, API lịch sử chính xác là những gì bạn đang tìm kiếm. Nếu bạn cũng muốn hỗ trợ các trình duyệt cũ, thì hãy tìm một thư viện quay lại thao tác với thẻ băm của URL nếu trình duyệt không cung cấp API lịch sử.