Hướng dẫn which method is used to change the address in address bar of the browser in javascript? - 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?

Cập nhật câu trả lời cho Davids để phát hiện các trình duyệt không hỗ trợ Pushstate:even detect browsers that do not support pushstate:

if (history.pushState) {
  window.history.pushState(stateObj, "title", "url");
} else {
  window.history.replaceState(stateObj, "title**", 'url');
  // ** It seems that current browsers other than Safari don't support pushState
  // title attribute. We can achieve the same thing by setting it in JS.
  document.title = "Title";
}

Bang

Đối tượng trạng thái là một đối tượng JavaScript được liên kết với mục nhập lịch sử được chuyển sang phương thức thay thế. Đối tượng trạng thái có thể là null.

Tiêu đề

Hầu hết các trình duyệt hiện đang bỏ qua tham số này, mặc dù chúng có thể sử dụng nó trong tương lai. Vượt qua chuỗi trống ở đây phải an toàn chống lại các thay đổi trong tương lai cho phương pháp. Ngoài ra, bạn có thể vượt qua một tiêu đề ngắn cho nhà nước.

URL tùy chọn Optional

URL của mục nhập lịch sử. URL mới phải có cùng nguồn gốc với URL hiện tại; Nếu không, hãy thay thế ném một ngoại lệ.

Trong bài viết này, tôi sẽ giải thích với một ví dụ, làm thế nào để 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 API lịch sử HTML5 trong JavaScript và JQuery.

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 đẩy lịch sử HTML5

Phương thức Pushstate hoạt động tương tự như Window.Location nhưng nó không làm mới hoặc tải lại trang và nó sẽ sửa đổi URL ngay cả khi trang không tồn tại. Phương pháp Pushstate thực sự chèn một mục nhập vào lịch sử của các trình duyệt cho phép chúng tôi qua lại bằng cách sử dụng các nút phía trước và quay lại của trình duyệt.

Phương thức Pushstate chấp nhận ba tham số sau.

1. Đối tượng trạng thái: - Đối tượng trạng thái là đối tượng JavaScript có thể chứa bất kỳ chi tiết nào về trang và phải có thể nối tiếp.

2. Tiêu đề: - Tiêu đề của trang.

3. URL - URL của trang.

Thay đổi URL trong thanh địa chỉ trình duyệt mà không tải lại bằng JavaScript

Đánh dấu HTML bao gồm 3 nút thực hiện cuộc gọi đến ChangeRl chức năng. Hàm này chấp nhận tiêu đề trang và URL làm tham số.

Trước tiên, nó kiểm tra xem Trình duyệt có hỗ trợ HTML5 hay không và nếu có thì một đối tượng trạng thái chứa tiêu đề trang và URL được tạo và được chuyển đến phương thức Pushstate lịch sử HTML5 cùng với tiêu đề trang và URL là hai tham số khác.

<script type="text/javascript">

Ảnh chụp màn hình ChangeUrl(title, url) {

tính tương thích của trình duyệt webif (typeof (history.pushState) != "undefined") {

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.var obj = { Title: title, Url: url };

& nbsp; & nbsp; & nbsp; & nbsp;

* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ.else {

Thử nghiệm"Browser does not support HTML5.");

Tải xuống

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

script>

<input type="button" value="Page1" onclick="ChangeUrl('Page1', 'Page1.htm');" />

<input type="button" value="Page2" onclick="ChangeUrl('Page2', 'Page2.htm');" />

<input type="button" value="Page3" onclick="ChangeUrl('Page3', 'Page3.htm');" />

Ảnh chụp màn hình

tính tương thích của trình duyệt web

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>

<script type="text/javascript">

Ảnh chụp màn hìnhfunction ChangeUrl(page, url) {

tính tương thích của trình duyệt webif (typeof (history.pushState) != "undefined") {

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.var obj = { Page: page, Url: url };

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cảnh báo ("Trình duyệt không hỗ trợ HTML5.");"Browser does not support HTML5.");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; $ (function () {function () {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ("#nút1"). Nhấp (function () {"#button1").click(function () {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang1', 'Trang1.htm');'Page1', 'Page1.htm');

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; });

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ("#nút2"). Nhấp (function () {"#button2").click(function () {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang2', 'Trang2.htm');'Page2', 'Page2.htm');

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; });

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ("#nút2"). Nhấp (function () {"#button3").click(function () {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang2', 'Trang2.htm');'Page3', 'Page3.htm');

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; });

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ("#nút2"). Nhấp (function () {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang2', 'Trang2.htm');script>

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang2', 'Trang2.htm');input type="button" value="Page1" id="button1" />

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang2', 'Trang2.htm');input type="button" value="Page2" id="button2" />

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang2', 'Trang2.htm');input type="button" value="Page3" id="button3" />

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ("#nút3"). Nhấp (function () {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ChangeUrl ('Trang3', 'Trang3.htm');

& nbsp; & nbsp; & nbsp; });

Ảnh chụp màn hình

tính tương thích của trình duyệt web

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.

Change_URL_Without_Reloading_Page.zip

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

Cách chính xác để thay đổi URL của trang bằng JavaScript là gì?

Thanh địa chỉ trong trình duyệt web là gì?

Địa chỉ của một trang web mà bạn nhập vào thanh địa chỉ để truy cập một trang là gì?