Hướng dẫn javascript change url and reload - javascript thay đổi url và tải lại

Hầu hết các câu trả lời ở đây cho thấy rằng người ta nên nối (các) tham số vào URL, một cái gì đó như đoạn trích sau hoặc một biến thể tương tự:

location.href = location.href + "¶meter=" + value;

Điều này sẽ hoạt động khá tốt cho phần lớn các trường hợp.

Tuy nhiên

Đó không phải là cách chính xác để nối một tham số vào URL theo ý kiến ​​của tôi.

Bởi vì cách tiếp cận được đề xuất không kiểm tra nếu tham số đã được đặt trong URL, nếu không cẩn thận, người ta có thể kết thúc với một URL rất dài với cùng một tham số được lặp lại nhiều lần. I E:

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

Tại thời điểm này là nơi vấn đề bắt đầu. Cách tiếp cận được đề xuất có thể và sẽ tạo một URL rất dài sau khi làm mới nhiều trang, do đó làm cho URL không hợp lệ. Theo liên kết này để biết thêm thông tin về URL dài Độ dài tối đa của URL trong các trình duyệt khác nhau là gì?

Đây là cách tiếp cận được đề xuất của tôi:

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

Với chức năng này, người ta sẽ phải làm như sau:

location.href = URL_add_parameter(location.href, 'param', 'value');

Đối tượng vị trí JavaScript

Vị trí cheatsheet.

Bạn có thể sử dụng thuộc tính

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

3 để truy cập URL của trang hiện tại.

Nếu bạn muốn truy cập một trang mới, bạn có thể thay đổi thuộc tính

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

4 của đối tượng

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

5 hoặc gọi phương thức

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

6 bằng URL mới làm đối số.

location.href = "new url";// or we can use location.assign("new url");

Để chuyển hướng mà không cần lưu trữ trong lịch sử:

location.replace("new url"); 

Để tải lại trang:

window.location.reload()

Lực lượng làm mới

Chúng ta có thể vượt qua

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

7 để buộc trang được tải lại đến từ máy chủ (thay vì bộ đệm). Ngoài ra, chúng tôi có thể sử dụng

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

8 để tải lại trang từ bộ đệm.

//from cache
window.location.reload(); 
window.location.reload(false);// from server
window.location.reload(true);

Thuộc tính của đối tượng vị trí

1. href

Chứa toàn bộ URL của trang.

location.href; // current page url addresss

Khi chúng tôi gán một giá trị mới cho thuộc tính, nó sẽ chuyển hướng giá trị

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

9 được đặt cho thuộc tính.

location.href = "https://google.com"; 

Đảm bảo thêm HTTP/HTTPS. Nếu không, nó thực hiện yêu cầu trên cùng một trang.

2. Giao thức

Chứa giao thức (

location.href = URL_add_parameter(location.href, 'param', 'value');

0) của trang.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

0

3. Máy chủ

Tên máy chủ trang web với số cổng.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

1

4. Tên máy chủ

Tên máy chủ trang web.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

2

5. Cổng

Chứa số cổng. Nếu URL không chứa số cổng rõ ràng, nó sẽ được đặt thành

location.href = URL_add_parameter(location.href, 'param', 'value');

1.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

3

6. Tên đường dẫn

Chứa đường dẫn sau tên máy chủ.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

4

7. Tìm kiếm

Trả về phần tìm kiếm của URL.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

5

8. Hash

Chứa chuỗi

location.href = URL_add_parameter(location.href, 'param', 'value');

2 theo sau là định danh đoạn của URL. Điều này sẽ hữu ích khi chúng tôi có các liên kết bên trong cùng một trang.

Ví dụ từ MDN Web Docs:

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

6

9. Nguồn gốc

Nguồn gốc của vị trí cụ thể.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

7

Phương pháp

1. Chuyển nhượng

Tải tài nguyên tại URL được cung cấp trong tham số.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

8

Điều này sẽ chuyển hướng đến

location.href = URL_add_parameter(location.href, 'param', 'value');

3.

2. Tải lại

Phương thức

location.href = URL_add_parameter(location.href, 'param', 'value');

4 Tải lại URL hiện tại, như nút Làm mới.

https://stackoverflow.com/?¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1¶m=1

9

Nó có một tham số tùy chọn

location.href = URL_add_parameter(location.href, 'param', 'value');

5, mặc định là

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

8 khi

location.href = URL_add_parameter(location.href, 'param', 'value');

5 là

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

7. Sau đó, nó tải trang từ máy chủ, thay vì tải từ bộ đệm trình duyệt., which defaults to

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

8 when

location.href = URL_add_parameter(location.href, 'param', 'value');

5 is

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

7. Then it loads the page from the server, instead of loading from the browser cache.

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

0

3. Thay thế

Thay thế tài nguyên hiện tại với công cụ tại URL được cung cấp.

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

1

Sự khác biệt so với phương thức

location.href = URL_add_parameter(location.href, 'param', 'value');

9 là sau khi sử dụng

location.href = "new url";// or we can use location.assign("new url");

0, trang hiện tại sẽ không được lưu trong phiên

location.href = "new url";// or we can use location.assign("new url");

1, có nghĩa là người dùng sẽ không thể sử dụng nút quay lại để điều hướng đến nó.

4. ToString

Trả về toàn bộ URL dưới dạng chuỗi.

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

2

Tham khảo: Tài liệu web MDN.

Theo JavaScript Jeep🚙💨

Làm cách nào để làm mới URL hiện tại của tôi?

Làm cách nào để thay đổi URL mà không tải lại?

Có phải trang tải lại thay thế?

Làm cách nào để nối một URL?