Hướng dẫn javascript change url path without reloading - javascript thay đổi đường dẫn url mà không cần tải lại

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ổ ____10. Đ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

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. 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ó

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 thực hiện 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

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'];

2 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

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 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'];

4, 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'];

3 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'];

6 hoặc

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 để 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'];

8 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'];

9 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à

window.location.hash = "example";

0 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

window.location.hash = "example";

1,

window.location.hash = "example";

2 hoặc

window.location.hash = "example";

3:

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.

API lịch sử HTML5 cung cấp các phương thức

window.location.hash = "example";

4 và

window.location.hash = "example";

5 được sử dụng để thêm và sửa đổi các bản ghi lịch sử trình duyệt mà không tải lại trang, tương ứng.

Lưu ý rằng API lịch sử chỉ cho phép cập nhật các URL có nguồn gốc tương tự. Bạn không thể sử dụng nó để điều hướng đến một trang web hoàn toàn khác.

Phương pháp

window.location.hash = "example";

4

Phương thức

window.location.hash = "example";

4 cập nhật URL và tạo một mục nhập mới trong lịch sử trình duyệt mà không tải lại trang.

Đây là cách nó trông như thế nào:

history.pushState[state, title, url];

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 là một đối tượng chứa một số dữ liệu liên quan đến URL mới. Nó có thể được truy xuất bằng thuộc tính JavaScript

window.location.hash = "example";

9.

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 là tiêu đề trang mới mà trình duyệt sẽ hiển thị. Tuy nhiên, đôi khi nó hoàn toàn bị bỏ qua bởi trình duyệt.

Cuối cùng,

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

1 là URL mới bạn muốn thêm vào lịch sử trình duyệt mà không tải lại trang.

Đây là một ví dụ:

history.pushState[{
    id: 'about-me',
    source: 'web'
}, 'About me', '//attacomsian.com'];

Phương pháp

window.location.hash = "example";

5

window.location.hash = "example";

5 là một phương pháp khác cập nhật URL mà không tải lại trang. Nó hoạt động chính xác giống như

window.location.hash = "example";

4, nhưng thay thế mục nhập lịch sử trình duyệt hiện có thay vì thêm một mục nhập mới.

Lý tưởng nhất, bạn chỉ nên sử dụng phương pháp này khi bạn muốn thay đổi URL mà không để lại bất kỳ dấu vết nào trong lịch sử trình duyệt:

history.replaceState[{
    id: 'JavaScript Tutorials',
    source: 'web'
}, 'All JavaScript Tutorials', '//attacomsian.com/topics/javascript'];

Thích bài viết này? Theo dõi tôi trên Twitter và LinkedIn. Bạn cũng có thể đăng ký nguồn cấp dữ liệu RSS. Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.