Tìm hiểu cách làm mới một trang trong JavaScript. Mười phương pháp tải lại trang bằng Javascript đơn giản. Các đoạn mã JavaScript để tải lại trang bằng nhiều phương pháp khác nhau.

Bạn đang xem : tải lại một trang bằng javascript

Chúng tôi có thể tải bất kỳ trang nào bằng cách nhấp vào liên kết của trang đó. Tuy nhiên, đôi khi chúng tôi cần tải lại hoặc làm mới cùng một trang bằng cách sử dụng JavaScript . Ở đây tôi sẽ chỉ ra các phương pháp mà bạn có thể chọn. Hãy cùng hướng tới 10 phương pháp để làm mới một trang trong JavaScript. Al các phương thức này là các câu lệnh một dòng trong JavaScript đơn giản. Không có chức năng phức tạp không có gì. Bạn chỉ cần sao chép và dán từng mã vào một trang HTML đơn giản và có thể thực thi.

Trong tất cả các ví dụ dưới đây, tôi đang ràng buộc sự kiện tải lại với một lần nhấp vào nút. Đây sẽ là một nhiệm vụ dễ dàng cho người mới. Sự kiện trang làm mới sẽ kích hoạt khi người dùng nhấp vào nút. Cùng với đó, tôi đang sử dụng PHP để in ngày tháng ở định dạng Giờ: Phút: Sáng / Chiều thứ hai để cho biết rằng trang đã được tải lại.

# 1 Sử dụng phương thức reload () để làm mới trang trong JavaScript

Cách đầu tiên đơn giản bằng cách sử dụng phương thức reload () của JavaScript. Nhụy hoa này sẽ chỉ cần tải lại vị trí của cửa sổ, Do đó, sẽ làm mới trang.

< p class = "crayon-num"> 1

2

3

< p class = "crayon-num crayon-sọc-num"> 4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt;

< p lớp = " crayon-line "id =" crayon-62b3d783e2545175077964-3 ">

& lt;

head

& gt;

< / p>

& lt;

title

& gt;

Tải lại trang

ví dụ

# 1 – Báo cáo viên kỹ thuật & lt; / title & gt;

& lt;

/

cái đầu

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Hiện tại

:

& lt;? php

echo

ngày

(

‘H: i: s A’

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

đầu vào

< p class = "crayon-i"> type

=

“button”

value

=

“Tải lại trang”

onClick

=

” window.location.reload (); “

& gt;

& lt;

/

body

& gt;

< / p>

& lt;

/

html

& gt;

# 2 Tải lại trang bằng document.location.reload (true);

Trong phương pháp này, vị trí của tài liệu sẽ được tải lại và dẫn đến việc làm mới trang. Chuyển true làm tham số sẽ cho phép tải trang từ máy chủ. Nếu chúng tôi sẽ vượt qua false, sau đó, trang sẽ được làm mới nhưng trang sẽ được tìm nạp từ bộ nhớ cache. Vì vậy, tùy theo yêu cầu mà sử dụng cái gì.

1

2

3

4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html < / p>

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tải lại trang

ví dụ

# 2 – Báo cáo viên kỹ thuật & lt; / title & gt;

& lt;

/

head

& gt;

& lt;

body

& gt;

& lt;

h1

< p class = "crayon-h"> & gt;

Bây giờ

:

& lt;? php

echo

ngày

(

‘H: i: s A’

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

nhập

type

=

“button”

value

=

“Tải lại trang”

< p class = "crayon-i"> onClick

=

“document.location.reload (true);”

& gt;

& lt;

/

body

& gt;

& lt; < / p> /

html

& gt;

# 3 Vị trí tự thay thế tp làm mới trang trong JavaScript

Trong phương pháp này, vị trí tự của trang sẽ được thay thế bằng vị trí của tài liệu. Điều đó có nghĩa là vị trí của tài liệu sẽ được thay thế bằng vị trí hiện tại và sẽ làm mới trang web.

1

2

3

4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt;

& lt;

cái đầu

& gt;

& lt;

title

& gt;

Tải lại trang

example

# 3 – Techbriefers & lt ; / title & gt;

& lt;

/

đầu

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Bây giờ

:

& lt;? php

echo

ngày

(

‘ H: i: s A ‘

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

input

type

=

” nút “

value

=

” Tải lại trang “

onClick

=

“self.location.replace (location [‘href’])”

& gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

# 4 Làm mới trang bằng cách gán vị trí cho vị trí cửa sổ < / h2>

Đây là một phương pháp rất đơn giản để làm mới trang bằng JavaScript. Trong phương pháp này, vị trí cửa sổ sẽ được gán giá trị của vị trí hiện tại, dẫn đến tải lại trang.

1

2

3

4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

< p class = "crayon-e"> Tải lại

trang

ví dụ

# 4 – Báo cáo viên kỹ thuật & lt; / title & gt;

& lt ;

/

head

& gt;

& lt;

body

& gt;

< p class = "crayon-h"> & lt;

h1

& gt;

Bây giờ

:

& lt;? php

echo

ngày

(

‘H: i: s A’

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

đầu vào

type

=

” button “

value

=

” Tải lại trang “

onClick

=

“window.location = location”

& gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

# 5 Gán tham chiếu vị trí cho vị trí cửa sổ

Ở đây, tôi đã chỉ định tham chiếu vị trí cho vị trí của cửa sổ. Vì tham chiếu vị trí thuộc cùng một trang nên nó sẽ buộc một trang phải tải lại.

1

2

3

4

5

6 < / p>

7

8

9 < / p>

10

& lt;

!

LOẠI TÀI LIỆU

html < / p>

& gt;

& lt;

html

& gt;

& lt;

head

& gt;

< p class = "crayon-h"> & lt;

title

& gt;

Tải lại trang

ví dụ

# 5 – Báo cáo viên kỹ thuật & lt; / title & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Bây giờ

:

& lt;? php

echo

ngày

(

‘H: i : s A ‘

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

input

=

“nút”

value =

“Tải lại trang”

onClick

=

“window.location = location.href”

& gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

# 6 Tải lại JavaScript bằng self.location

Trong ví dụ dưới đây, phương pháp tôi đã sử dụng là gán vị trí cho vị trí tự. Vị trí tự của Trang Web sẽ được gán một giá trị là vị trí cửa sổ bởi self.location.assign (window.location) để tải lại trang web.

1

2

3

4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

< p class = "crayon-h"> & lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tải lại

trang

ví dụ

# 6 – Techbriefers & lt; / title & gt;

& lt;

/

đầu

& gt;

& lt;

body

& gt;

& lt ;

h1

& gt;

Bây giờ

:

& lt;? php

echo

ngày

(

‘H: i: s A’

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

input

loại

=

“nút”

value

=

” Tải lại trang “

onClick

=

” self.location.assign (window.location) “

& gt;

& lt;

/

body

& gt;

< p class = "crayon-h"> & lt;

/

html

& gt;

# 7 Bằng cách thay thế vị trí hiện tại

Tôi hiện đang sử dụng meth thay thế od. Dưới đây tôi đang thay thế vị trí hiện tại bằng vị trí của cửa sổ. Cả hai đều giống nhau, do đó sẽ tải lại trang bằng mã Javascript.

1

2

3

4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tải lại

trang

ví dụ

# 7 – Techbriefers & lt; / title & gt;

& lt;

/

head < / p>

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Bây giờ

:

& lt;? php

echo

date

(

‘H: i: s A’

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

input

type

=

“button”

value

=

“Tải lại trang”

onClick

=

” location [‘Replace’] (window.location) “

& gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

# 8 Sử dụng history.go để tải lại trang

1

2

3

4

5

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tải lại trang

ví dụ

# 8 – Báo cáo viên kỹ thuật & lt; / title & gt;

& lt;

/

cái đầu

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Bây giờ

:

& lt;? php

< / p>

echo

ngày

(

‘H: i: s A’

)

< p class = "crayon-sy">;

? & gt;

& lt;

/

h1

& gt;

& lt;

input

type

=

“button”

< p class = "crayon-h">

giá trị

=

“Tải lại trang”

onClick

=

“history.go (0);”

& gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

# 9 Gán tham chiếu vị trí tự cho vị trí hiện tại

KHÔNG CÓ trong phương pháp này, tôi sẽ chỉ định tham chiếu vị trí tự cho vị trí hiện tại. Vì URL hiện tại sẽ được gán cho vị trí hiện tại, trang sẽ tải vị trí đó. Vị trí giống với vị trí hiện tại, vì vậy sẽ làm mới trang.

1

2

3

4

5

6

7

8

9

10 < / p>

& lt;

! < / p>

LOẠI TÀI LIỆU

html

& gt;

< / p>

& lt;

html

& gt;

& lt;

head

& gt;

< p class = "crayon-line crayon-sọc-line" id = "crayon-62b3d783e2567036189289-4">

& lt; < / p>

title

& gt;

Tải lại trang

ví dụ

# 9 – Sách báo kỹ thuật & lt; / title & gt;

& lt;

/

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Hiện tại

:

& lt;? php

echo

ngày

(

‘H: i: s A’

< lớp p = "crayon-sy">)

;

? & gt;

& lt;

/

h1

& gt ;

& lt;

input

type

=

” nút “

value

=

“Tải lại trang”

onClick

=

” location.assign (self.location.href) “

& gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

# 10 Thay thế vị trí hiện tại trên bằng cách tự tham chiếu vị trí

1

2 < / p>

3

4

5 < / p>

6

7

8

9

10

& lt;

!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt;

& lt; < / p>

đầu

& gt;

< p class = "crayon-h">

& lt;

title

& gt;

Tải lại trang

ví dụ

# 10 – Báo cáo viên kỹ thuật & lt; / title & gt;

& lt;

/

đầu

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Bây giờ

:

& lt;? php

echo

ngày

(

‘ H: i: s A ‘

)

;

? & gt;

& lt;

/

h1

& gt;

& lt;

đầu vào

=

” nút “

value

=

“Tải lại trang”

onClick < / p> =

“location.replace (self.location.href)”

& gt;

& lt;

/

body

& gt;

& lt;

/ < p class = "crayon-i"> html

& gt;


Xem thêm những thông tin liên quan đến chủ đề tải lại một trang bằng javascript

How To Use Local Storage With JavaScript

  • Tác giả: codebubb
  • Ngày đăng: 2019-10-14
  • Đánh giá: 4 ⭐ ( 4323 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, you’ll learn how to use local storage with JavaScript. Get my free 32 page eBook of JavaScript HowTos 👉https://bit.ly/2ThXPL3https://juniordevelopercentral.com/treehouse 👍

    — Also check out these related videos —
    – Creating a filterable list with JavaScript: https://www.youtube.com/watch?v=LW5e5CPjjJc
    – How to make a POST request: https://www.youtube.com/watch?v=xJAxjstgITk
    – How to load an image with JavaScript: https://www.youtube.com/watch?v=UcWb1jW0syw

    So if you’re setting variables and storing information in them, you’ll probably have noticed that refreshing the page means all that data gets reset. If you want to persist that information you need to store it somewhere. This JavaScriptHowTo tutorial will cover how to do that with localStorage (one of the HTML5 APIs).

    You’ll learn in the tutorial how to set an item in local storage and then retrieve it upon subsequent page loads. You will also see how you can store more complex data, like arrays and objects as JSON data.

setInterval() trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 5587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức setInterval() gọi một hàm hoặc đánh giá một biểu thức sau một khoảng thời gian xác định (tính bằng mili giây). Tuy nhiên, số lần gọi hàm là liên tục

Làm thế nào để kích hoạt JavaScript trong Windows

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 3127 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này mô tả bước cho người dùng để cho phép tất cả các trang web trong vùng Internet để chạy JavaScript trong Internet Explorer, Chrome và Firefox.

Cách chuyển hướng đến một trang web khác bằng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 6288 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Điều hướng trang (Redirect) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 3706 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều hướng trang (Redirect) trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Cách tải lại trang bằng JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6526 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] JavaScript 1.0 window.location.href = window.location.pathname + window.location.search + window.location.hash; // creates a history entry JavaScript 1.1…

Hướng dẫn Refresh lại trang bằng PHP theo thời gian

  • Tác giả: lar.edu.vn
  • Đánh giá: 3 ⭐ ( 7287 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thường thì mình hay dùng Javascript để refresh (làm mới) lại trang hay còn gọi là F5 lại trang, ở bài này mình sẽ hướng dẫn bạn refresh lại trang bằng PHP.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tổng hợp mẹo và thủ thuật trên MacBook dành cho người mới sử dụng - mẹo dùng macbook

By ads_php