Câu hỏi 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.

Các hành vi tôi đang tìm kiếm thường được nhìn thấy với một số hiện thực của trang liên tục / vô hạn, trong khi bạn di chuyển xuống chuỗi truy vấn tiếp tục tăng số trang (http://x.com?page=4) vv .. Điều này nên đơn giản trong lý thuyết, nhưng tôi muốn một cái 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àyvà đang cố gắng làm theo ví dụ window.history.pushstate, nhưng điều đó dường như không hiệu quả đối với tôi. Và tôi không chắc 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 được xem, mà không cần tải lại trang mỗi khi ảnh được thay đổi.

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

CẬP NHẬT tìm thấy phương pháp này:

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

nó xuất hiện để làm việc cho tôi, nhưng tôi đang trên một 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?


59
2018-06-10 15:48


gốc


Bạn có thể đăng một liên kết đến một số trang web mẫu để cập nhật chuỗi truy vấn của nó một cách động không? Tôi không nghĩ rằng nó có thể được thực hiện, nhưng bạn có thể thay đổi giá trị băm và có thể là đủ để có được những gì bạn muốn. - Pointy
có thể trùng lặp cách thao tác URL bằng javascript / jquery? - Quentin
ví dụ được thêm vào. - Sonic Soul
có thể trùng lặp Làm thế nào để GitHub thay đổi URL nhưng không phải là tải lại? - Quentin
có thể trùng lặp Tại sao Dropbox web mới có thể thay đổi URL mà không cần làm mới trang? và ba câu hỏi được đánh dấu là bản sao của - Quentin


Các câu trả lời:


Nếu bạn đang tìm kiếm sửa đổi Hash, giải pháp của bạn hoạt động ok. 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 thực hiện 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, nhưng nó 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 giá trị máy chủ lưu trữ. Và tất nhiên là nó đòi hỏi 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/Manipulating_the_browser_history


94
2017-10-09 18:05



Tôi tin rằng bạn có thể rút ngắn window.location.protocol + '//' + window.location.host chỉ: window.location.origin. - Garrett
Ngoài ra, để có thêm một chút thông tin, các đường dẫn tương đối hoạt động tốt với history.pushState(). Không có thực tế state đối số là bắt buộc. Cả hai điều này có nghĩa là bạn có thể làm điều gì đó đơn giản như history.pushState(null, '', '/foo?bar=true') nếu url mới của bạn nằm trên cùng một máy chủ / cổng. - Blaskovicz
Lưu ý rằng, nếu bạn không muốn trạng thái mới xuất hiện trên lịch sử trình duyệt, bạn có thể sử dụng history.replaceState() với cùng một đối số. - Blackus
SỬ DỤNG history.replaceState () nếu không bạn cần nhấp vào nút BACK hai lần trong trình duyệt của mình - Zhenya
trong các trình duyệt hiện đại, bạn có thể thực hiện: if (window.history.pushState) { const newURL = new URL(window.location.href); newURL.search = '?myNewUrlQuery=1'; window.history.pushState({ path: newURL.href }, '', newURL.href); } - Allan Baptista


Tôi đã sử dụng thư viện JavaScript sau đây 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ư phương thức dự phòng (sử dụng #) cho các trình duyệt cũ hơn.

Thư viện này về cơ bản là một polyfill xung quanh `history.pushState '.


6
2018-06-10 16:12



tuyệt vời! bạn đã thử nó với tất cả các trình duyệt? - Sonic Soul
Việc triển khai của tôi đã được thử nghiệm trong IE7 +, Firefox 3.6+, Safari 5 và Chrome 16+. Nó có thể làm việc với các trình duyệt khác, nhưng tôi đã không có bất kỳ khiếu nại trong một số hệ thống triển khai bằng cách sử dụng nó. - Ian Newson
tuyệt quá. vì vậy ngay bây giờ .. chỉ cần đặt một # thay vì một & khi viết để window.location.href làm việc cho tôi. ở chỗ nó không tải lại trang. tôi chắc chắn nó sẽ phá vỡ một khi tôi kiểm tra nó trong IE .. lúc đó tôi sẽ đi với thư viện bạn đề nghị. cảm ơn - Sonic Soul
Phương pháp # là một phương pháp tốt ở chỗ nó có hỗ trợ trình duyệt rất rộng. Mọi thứ có thể phức tạp khi bạn cần bao gồm thông tin đó trong các yêu cầu tới máy chủ vì phần # của URL không được trình duyệt gửi đi. Có nhiều cách làm tròn, bao gồm thư viện mà tôi đã tham chiếu. Ngoài ra, việc sử dụng API lịch sử HTML5 giúp làm cho URL của bạn ngắn hơn tổng thể và yêu cầu ít công việc của khách hàng hơn để khôi phục trạng thái. - Ian Newson


Xây dựng câu trả lời của Fabio, tôi đã tạo ra hai chức năng có thể sẽ hữu ích cho bất kỳ ai vấp phải câu hỏi này. Với hai chức năng 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 form a url
function removeURLParameter(url, parameter) {
    //prefer 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);
    }
}

2
2018-02-20 16:00





Sau đó, API lịch sử là chính xác 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ũ, hãy tìm thư viện quay lại thao tác thẻ băm của URL nếu trình duyệt không cung cấp API lịch sử.


0
2018-06-10 15:57