Hướng dẫn how to change url without reloading page in javascript? - làm thế nào để thay đổi url mà không cần tải lại trang trong javascript?

Trong các trình duyệt hiện đại và HTML5, có một phương pháp gọi là pushState trên cửa sổ history. Điều đó sẽ thay đổi URL và đẩy nó vào lịch sử mà không cần tải trang.browsers and HTML5, there is a method called pushState on window history. That will change the URL and push it to the history without loading the page.

Bạn có thể sử dụng nó như thế này, nó sẽ lấy 3 tham số, 1) Đối tượng trạng thái 2) Tiêu đề và URL):

window.history.pushState({page: "another"}, "another page", "example.html");

Điều này sẽ thay đổi URL, nhưng không tải lại trang. Ngoài ra, nó không kiểm tra xem trang có tồn tại không, vì vậy nếu bạn thực hiện một số mã JavaScript đang phản ứng với URL, bạn có thể làm việc với chúng như thế này.

Ngoài ra, có history.replaceState() làm chính xác điều tương tự, ngoại trừ nó sẽ sửa đổi lịch sử hiện tại thay vì tạo ra một cái mới!

Ngoài ra, bạn có thể tạo một chức năng để kiểm tra xem history.pushState có tồn tại không, sau đó tiếp tục với phần còn lại như sau:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Ngoài ra, bạn có thể thay đổi ____10 cho

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
1, không tải lại trang. Đó là cách Angular sử dụng để làm spa theo hashtag ...

Thay đổi

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
0 khá dễ dàng, làm như:

window.location.hash = "example";

Và bạn có thể phát hiện nó như thế này:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Bắt đầu nội dung chính

Hướng dẫn how to change url without reloading page in javascript? - làm thế nào để thay đổi url mà không cần tải lại trang trong javascript?

Sử dụng API lịch sử

API lịch sử HTML5 chắc chắn là cách để đi cho các trang web hiện đại. Nó hoàn thành nhiệm vụ trong tay, đồng thời cung cấp chức năng bổ sung. Bạn có thể sử dụng

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
3 hoặc history.replaceState() để sửa đổi URL trong trình duyệt, tùy thuộc vào nhu cầu của bạn:

const nextURL = 'https://my-website.com/page_b';
const nextTitle = 'My new page title';
const nextState = { additionalInformation: 'Updated the URL with JS' };


window.history.pushState(nextState, nextTitle, nextURL);


window.history.replaceState(nextState, nextTitle, nextURL);

Các đối số cho cả hai phương thức đều giống nhau, cho phép bạn vượt qua một đối tượng

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
5 có thể tùy chỉnh làm đối số đầu tiên, một
function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
6 tùy chỉnh (mặc dù hầu hết các trình duyệt sẽ bỏ qua tham số này) và
function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
7 bạn muốn thêm/thay thế trong lịch sử của trình duyệt. Hãy nhớ rằng API lịch sử chỉ cho phép các URL đồng nghĩa, vì vậy bạn không thể điều hướng đến một trang web hoàn toàn khác.

Sử dụng API vị trí

API vị trí cũ hơn không phải là công cụ tốt nhất cho công việc. Nó tải lại trang, nhưng vẫn cho phép bạn sửa đổi URL hiện tại và có thể hữu ích khi làm việc với các trình duyệt Legacy. Bạn có thể sửa đổi URL, bằng cách sử dụng

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
8,
function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');
9 hoặc
window.location.hash = "example";
0:

const nextURL = 'https://my-website.com/page_b';


window.location.href = nextURL;


window.location.assign(nextURL);


window.location.replace(nextURL);

Như bạn có thể thấy, cả ba tùy chọn sẽ khiến một trang tải lại, có thể không mong muốn. Không giống như API lịch sử, bạn chỉ có thể đặt URL, mà không cần bất kỳ đối số bổ sung nào. Cuối cùng, API vị trí không giới hạn bạn đối với các URL có nguồn gốc tương tự, điều này có thể gây ra các vấn đề bảo mật nếu bạn không cẩn thận.

Đoạn trích được đề xuất

  • Nhận giao thức đang được sử dụng trên trang hiện tại.

  • Tạo một đối tượng chứa các tham số của URL hiện tại.

  • Chuyển đổi trang đến HTTPS nếu nó hiện đang ở HTTP.

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

  • Đọc
  • Bàn luận
  • Xem thảo luận

    Cải thiện bài viết

    Lưu bài viết

    Đọc The history interface of the browser manages the browser session history. It includes the page visited in the tab or frame where the current page is located. Manipulating this state can be used to change the URL of the browser without reloading the page.

    Bàn luậnreplaceState() method is used to modify the current history entry and replace the properties of the state with ones in the passed parameters.

    Phương pháp 1: Thay thế trạng thái hiện tại bằng phương thức thay thế (): Giao diện lịch sử của trình duyệt quản lý lịch sử phiên của trình duyệt. Nó bao gồm trang được truy cập trong tab hoặc khung nơi đặt trang hiện tại. Thao tác trạng thái này có thể được sử dụng để thay đổi URL của trình duyệt mà không tải lại trang.

    Phương thức thay thế () được sử dụng để sửa đổi mục nhập lịch sử hiện tại và thay thế các thuộc tính của trạng thái bằng các thuộc tính trong các tham số được truyền.

    Example:

    window.location.hash = "example";
    
    1

    window.location.hash = "example";
    
    2
    window.location.hash = "example";
    
    3
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    2
    window.location.hash = "example";
    
    6
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    6
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    3

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    5

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    6
    window.location.hash = "example";
    
    4

    Các tham số của phương pháp này có 3 phần, đối tượng trạng thái là đối tượng có thể nối tiếp về trạng thái, tiêu đề là tiêu đề của trạng thái mới và URL là URL mới của trạng thái.

    window.location.hash = "example";
    
    2
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    4
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    22
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    8
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    9
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    0
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    1
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    4

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    8
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2pushState1
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    3

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    5

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7pushState1
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2history3
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2history6

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2history8

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7history3
    window.location.hash = "example";
    
    4

    URL có thể được thay đổi bằng cách chuyển URL cần thiết dưới dạng chuỗi cho phương thức này. Điều này sẽ thay đổi URL của trang mà không tải lại trang.

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2history.pushState1

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    window.location.hash = "example";
    
    6
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2history.pushState8
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    01

    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    02
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    03

    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    02
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    05

    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    06
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    07

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    09

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7history.pushState8
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    4
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    window.location.hash = "example";
    
    3
    window.location.hash = "example";
    
    4

    Output:

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    22history.replaceState()5 history.replaceState()6
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    0history.replaceState()8
    window.location.hash = "example";
    
    4
    The pushState() method is used to add a new history entry with the properties passed as parameters. This will change the current URL to the new state given without reloading the page.

    Các tham số của phương pháp này có ba phần, đối tượng trạng thái là đối tượng có thể nối tiếp về trạng thái, tiêu đề là tiêu đề mới của trạng thái và URL là URL mới của trạng thái. URL cần thiết như một chuỗi cho phương pháp này. Điều này sẽ thay đổi URL của trang mà không tải lại trang.
    The URL can be changed by passing the required URL as a string to this method. This will change the URL of the page without reloading the page.

    Example:

    window.location.hash = "example";
    
    1

    window.location.hash = "example";
    
    2
    window.location.hash = "example";
    
    3
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    2
    window.location.hash = "example";
    
    6
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    6
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    3

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    5

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    6
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    window.location.hash = "example";
    
    6
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    2
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    4
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    22
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    8
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    9
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    0
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    1
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    4

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    8
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2pushState1
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    3

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    5

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7pushState1
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2history3
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    75

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    77

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7history3
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    22history.replaceState()5 history.replaceState()6
    const nextURL = 'https://my-website.com/page_b';
    
    
    window.location.href = nextURL;
    
    
    window.location.assign(nextURL);
    
    
    window.location.replace(nextURL);
    0__

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    90

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7history.replaceState()5
    window.location.hash = "example";
    
    4

    window.location.hash = "example";
    
    8
    window.location.hash = "example";
    
    2history.pushState8
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    window.location.hash = "example";
    
    00

    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    02
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    03

    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    02
    window.location.hash = "example";
    
    04

    window.location.hash = "example";
    
    05
    window.location.hash = "example";
    
    06

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    2
    function goTo(page, title, url) {
      if ("undefined" !== typeof history.pushState) {
        history.pushState({page: page}, title, url);
      } else {
        window.location.assign(url);
      }
    }
    
    goTo("another page", "example", 'example.html');
    
    09

    window.location.hash = "example";
    
    8
    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7history.pushState8
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    const nextURL = 'https://my-website.com/page_b';
    const nextTitle = 'My new page title';
    const nextState = { additionalInformation: 'Updated the URL with JS' };
    
    
    window.history.pushState(nextState, nextTitle, nextURL);
    
    
    window.history.replaceState(nextState, nextTitle, nextURL);
    4
    window.location.hash = "example";
    
    4

    window.onhashchange = function () {
      console.log("#changed", window.location.hash);
    }
    
    7
    window.location.hash = "example";
    
    3
    window.location.hash = "example";
    
    4

    Output:


    Làm cách nào để sử dụng JavaScript để sửa đổi URL mà không cần tải lại trang?

    Trang sử dụng JavaScript? Phương pháp 2: Thêm trạng thái mới với phương thức PUSHSTATE (): Phương thức PushState () được sử dụng để thêm một mục nhập lịch sử mới với các thuộc tính được truyền dưới dạng tham số. Điều này sẽ thay đổi URL hiện tại sang trạng thái mới được đưa ra mà không tải lại trang.Adding a new state with pushState() Method: The pushState() method is used to add a new history entry with the properties passed as parameters. This will change the current URL to the new state given without reloading the page.

    Chúng ta có thể thay đổi URL bằng JavaScript không?

    Vị trí để chuyển hướng đến một URL khác với JavaScript. Bạn có thể chuyển hướng một trang web sang một trang khác theo một số cách bao gồm chuyển hướng phía máy chủ, chuyển hướng làm mới meta HTML và chuyển hướng JavaScript.. You can redirect a web page to another page in a number of ways including server-side redirects, HTML meta refresh redirects and JavaScript redirects.

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

    Sẽ rất hữu ích khi hiểu tập lệnh đã cho ...
    Trước hết, sự kiện nhấp vào lửa trên liên kết điều hướng a.....
    Ngăn chặn trang làm mới bằng cách sử dụng e.....
    Nhận URL hiện tại bằng cách nhấp vào liên kết điều hướng và lưu trữ nó trong PageUrl ..
    Thay đổi URL mà không tải lại trang bằng lịch sử.pushstate (null, '', pageUrl).

    Phương pháp nào được sử dụng để thay đổi địa chỉ trong thanh địa chỉ của trình duyệt trong JavaScript?

    API Lịch sử HTML5 cho phép các trình duyệt thay đổi URL trong thanh địa chỉ trình duyệt mà không tải lại hoặc làm mới trang bằng chức năng Pushstate.Phương pháp Pushstate hoạt động tương tự như cửa sổ.pushState function. The pushState method works similar to window.