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
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 = '//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 = '//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
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"; 2window.location.hash = "example"; 3window.location.hash = "example"; 4
window.location.hash = "example"; 2window.location.hash = "example"; 6window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2function 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'); 6window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 3
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 5
window.location.hash = "example"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7function 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'); 6window.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"; 2const nextURL = '//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);4window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 22const nextURL = '//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 = '//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);9const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);0const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);1window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);4
window.location.hash = "example"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7const nextURL = '//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);8window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2pushState1window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 3
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 5
window.location.hash = "example"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7pushState1window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2history3window.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"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7history3window.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); } 7window.location.hash = "example"; 6window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2history.pushState8window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2function 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'); 02function 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'); 02function 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'); 06function 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); } 2function 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"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7history.pushState8window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 7const nextURL = '//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);4window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 7window.location.hash = "example"; 3window.location.hash = "example"; 4
Output:
window.location.hash = "example"; 8window.location.hash = "example"; 22history.replaceState()5 history.replaceState()6const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);0history.replaceState()8window.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"; 2window.location.hash = "example"; 3window.location.hash = "example"; 4
window.location.hash = "example"; 2window.location.hash = "example"; 6window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2function 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'); 6window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 3
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 5
window.location.hash = "example"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7function 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'); 6window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 7window.location.hash = "example"; 6window.location.hash = "example"; 4
window.location.hash = "example"; 2const nextURL = '//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);4window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 22const nextURL = '//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 = '//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);9const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);0const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);1window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2const nextURL = '//my-website.com/page_b'; window.location.href = nextURL; window.location.assign(nextURL); window.location.replace(nextURL);4
window.location.hash = "example"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7const nextURL = '//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);8window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2pushState1window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 3
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.onhashchange = function () { console.log("#changed", window.location.hash); } 5
window.location.hash = "example"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7pushState1window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2history3window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2function 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); } 2function 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"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7history3window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 22history.replaceState()5 history.replaceState()6const nextURL = '//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); } 2function 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"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7history.replaceState()5window.location.hash = "example"; 4
window.location.hash = "example"; 8window.location.hash = "example"; 2history.pushState8window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2window.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'); 02function 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'); 02window.location.hash = "example"; 04
window.location.hash = "example"; 05window.location.hash = "example"; 06
window.onhashchange = function () { console.log("#changed", window.location.hash); } 2function 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"; 8window.onhashchange = function () { console.log("#changed", window.location.hash); } 7history.pushState8window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 7const nextURL = '//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);4window.location.hash = "example"; 4
window.onhashchange = function () { console.log("#changed", window.location.hash); } 7window.location.hash = "example"; 3window.location.hash = "example"; 4
Output: