Hướng dẫn javascript replace current page with html - javascript thay thế trang hiện tại bằng html

Question

Tôi có một chức năng JavaScript được truyền một chuỗi. Chuỗi mà nó được thông qua là toàn bộ trang web, bao gồm cả tiêu đề. Tôi cần JavaScript để thay thế toàn bộ trang hiện tại, đầu và tất cả bằng nội dung mới.

Nội dung chính Show

Vị trí cửa sổ.replace ()
Định nghĩa và cách sử dụng
Thông số
Giá trị trả về
Hỗ trợ trình duyệt
Thông số
Giá trị trả về
Thông số kỹ thuật
Tính tương thích của trình duyệt web

Xem xét tệp HTML sau:


  
    
  
  
    Original Content

Trong trường hợp này, chuỗi được truyền qua là:

New Content

Nhưng tất nhiên, vì chức năng "thay thế" chỉ thay thế cơ thể, nhưng không phải là tiêu đề, tôi không bao giờ nhận được cảnh báo "Goodbye World".

Bỏ qua "Tại sao tôi muốn làm điều này", làm thế nào tôi có thể tự động thay thế toàn bộ trang, bao gồm các hàm tiêu đề và JavaScript? How can I dynamically replace the entire page, including the header, and javascript functions?

Vui lòng nhớ "Nguồn" HTML ('NewContent' ở trên) chỉ tồn tại dưới dạng chuỗi, nó không tồn tại trên máy chủ ở bất cứ đâu, vì vậy tôi không thể chuyển hướng đến nó.

Những thay đổi tôi thực hiện đối với "thay thế" ở trên để gây ra cảnh báo "Goodbye World" xuất hiện sau khi nội dung được thay thế? Xin lưu ý rằng tôi không thể biết trước giá trị của biến NewContent !!

Vị trí cửa sổ.replace ()

Thí dụ

Thay thế tài liệu hiện tại:

vị trí.replace ("https://www.w3schools.com");

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Phương thức replace() thay thế tài liệu hiện tại bằng một phương thức mới.

Xem thêm:

Phương thức gán ()

Ghi chú

Sự khác biệt giữa gán () và thay thế ():

thay thế () loại bỏ URL hiện tại khỏi lịch sử tài liệu.

Với thay thế (), không thể sử dụng "trở lại" để điều hướng trở lại tài liệu gốc.

Cú pháp

Thông số

Tham số	Sự mô tả
Newurl	Yêu cầu. URL của một trang để điều hướng đến. The URL of a page to navigate to.

Giá trị trả về

Hỗ trợ trình duyệt

location.replace() được hỗ trợ trong tất cả các trình duyệt:


Trình duyệt Chrome	I E	Bờ rìa	Firefox	Cuộc đi săn	Opera
Đúng	Đúng	Đúng	Đúng	Đúng	Đúng

Phương thức replace() của giao diện Location thay thế tài nguyên hiện tại với công thức tại URL được cung cấp. Sự khác biệt so với phương thức assign() là sau khi sử dụng replace(), trang hiện tại sẽ không được lưu trong phiên History, 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ó.replace() method of the Location interface replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.

Nếu nhiệm vụ không thể xảy ra do vi phạm bảo mật, một loại

New Content

0 của loại

New Content

1 bị ném. Điều này xảy ra nếu nguồn gốc của tập lệnh gọi phương thức khác với nguồn gốc của trang được mô tả bởi đối tượng Location, chủ yếu là khi tập lệnh được lưu trữ trên một miền khác.

Nếu URL được cung cấp không hợp lệ,

New Content

0 thuộc loại

New Content

4 bị ném.

Cú pháp

Thông số

New Content

5

Một chuỗi chứa URL của trang để điều hướng đến.

Giá trị trả về

Ví dụ

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

Thông số kỹ thuật

Sự chỉ rõ
HTML Standard # Dom-Loccation-Replace-Dev # dom-location-replace-dev

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

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Giao diện Location thuộc về.

Phương pháp tương tự:

New Content

7 và

New Content

8.

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

Bàn luận

Cho một tài liệu HTML và công việc là thay thế toàn bộ phần tử HTML bằng một tài liệu mới với sự trợ giúp của JavaScript. Một vài cách tiếp cận được thảo luận ở đây.
Tiếp cận 1:.replace() method on HTML element and replace it with the new HTML Document(eg.. $(‘html’).html(Str)).

Giá trị trả vềThis example implements the above approach.

New Content

9

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

4

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

Sử dụng phương thức .Replace () trên phần tử HTML và thay thế nó bằng tài liệu HTML mới (ví dụ .. $ (‘HTML,). HTML (str)).

replace()0replace()1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0replace()8 replace()9location.replace()0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3replace()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0location.replace()7

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()0replace()0

replace()1replace()2

replace()1replace()4

replace()1replace()6

replace()1replace()8

replace()1Location0

replace()0Location2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3location.replace()7

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()3

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

4

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

‘

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0assign()8 location.replace()7location.replace()0replace()1replace()2

replace()1replace()4

replace()0replace()3assign()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0History1 History2location.replace()0History4

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3History1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6_______

replace()0

New Content

08

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3

New Content

02

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

Các

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3History1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0replace()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()1

New Content

42

replace()0

New Content

34

replace()0

New Content

36

New Content

37

New Content

38

replace()0

New Content

40

replace()1

New Content

42

New Content

43

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

New Content

45

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

4

New Content

45

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

8

New Content

49

Các

New Content

60assign()8 location.replace()7

New Content

57replace()1

New Content

65assign()8

New Content

45History1__169

New Content

70

New Content

71History1

New Content

52assign()1

New Content

75

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

New Content

77

replace()1

New Content

79

replace()0Location2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3replace()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()3assign()1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()3

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

Output:

Tiếp cận 2:

Lấy tài liệu mới làm dạng chuỗi (ví dụ .. str = xông).
Sử dụng phương thức .Open () trên tài liệu và phương thức này lấy 2 tham số (đầu tiên là văn bản/HTML và thứ hai là thay thế Thay thế). Nếu chúng tôi không sử dụng ‘thay thế, thì phương thức sẽ gọi thêm lịch sử trang. Vì vậy, chúng tôi sẽ phải nhấp lại hai lần để đi đến trang trước. Vì vậy, thay thế là đối số cần thiết để vượt qua..open() method on document and this method takes 2 parameters(first is “text/html” and second is “replace”). If we don’t use ‘Replace’ then method will call adds page history. So we would have to click back two times to go to the previous page. So, replace is necessary argument to pass.
Đối với phương thức sử dụng tài liệu mới này .write () và chuyển tài liệu mới..write() method and pass the new document.
Sử dụng phương thức .close () trên tài liệu để nó hoạt động..close() method on document for it to work.

Ví dụ 2: Ví dụ này thực hiện phương pháp trên.This example implements the above approach.

New Content

9

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

4

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

03replace()1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0replace()8 replace()9location.replace()0

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3replace()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0location.replace()7

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()0replace()0

replace()1replace()2

replace()1replace()4

replace()1replace()6

replace()1replace()8

replace()1Location0

replace()0Location2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3location.replace()7

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()3

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

4

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

‘

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0assign()8 location.replace()7location.replace()0replace()1replace()2

replace()1replace()4

replace()0replace()3assign()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0History1 History2location.replace()0History4

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3History1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6_______

replace()0

New Content

08

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3

New Content

02

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

Các

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3History1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

0replace()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()0

New Content

32

replace()0

New Content

34

replace()0replace()09

replace()0

New Content

40

replace()1

New Content

42

New Content

70

New Content

43

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

New Content

45

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

4

New Content

45

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

8replace()21

Các

New Content

70

New Content

60______

New Content

70replace()45History1

New Content

52assign()1

New Content

75

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

New Content

77

replace()1replace()53

replace()1replace()55

replace()1replace()57

replace()0Location2

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

6replace()3replace()8

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()3assign()1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

replace()3

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

1

// Navigate to the Location.reload article by replacing this page
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

2

Output:

programming javascript JavaScript replace HTML JavaScript replace content JavaScript replace body Js replace document textContent replace

Hướng dẫn javascript replace current page with html - javascript thay thế trang hiện tại bằng html

Vị trí cửa sổ.replace ()

Thí dụ

Định nghĩa và cách sử dụng

Xem thêm:

Ghi chú

Cú pháp

Thông số

Giá trị trả về

Hỗ trợ trình duyệt

Cú pháp

Thông số

Giá trị trả về

Ví dụ

Thông số kỹ thuật

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

Xem thêm

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội