Vị trí cửa sổ Phương pháp
Các window.location đối tượng có thể được sử dụng để lấy thông tin về địa chỉ trang hiện tại (URL) và để chuyển hướng trình duyệt đến một trang mới.
Các window.location đối tượng có thể được viết mà không cần window tiền tố, như chỉ location.
Vài ví dụ:
window.location.hreftrả về href (URL) của trang hiện tạiwindow.location.hostnametrả về tên miền của máy chủ lưu trữ webwindow.location.hosttrả về cả tên máy chủ và bất kỳ cổng nào được liên kếtwindow.location.pathnametrả về đường dẫn và tên tệp của trang hiện tạiwindow.location.protocoltrả về giao thức web được sử dụng (http: hoặc https:)window.location.assign()tải một tài liệu mới
Thêm thông tin:
MDN
Phương pháp setInterval cửa sổ
Các setInterval() gọi một hàm hoặc đánh giá một biểu thức theo các khoảng thời gian đã chỉ định (tính bằng mili giây).
setInterval(function(){
alert("Hello");
}, 3000); Các setInterval() phương thức sẽ tiếp tục gọi hàm cho đến khi clearInterval() được gọi hoặc cửa sổ bị đóng.
Các setInterval() có thể truyền các tham số bổ sung cho hàm, như minh họa trong ví dụ bên dưới.
setInterval(function, milliseconds, parameter1, parameter2, parameter3); Giá trị ID được trả về bởi setInterval() được sử dụng làm tham số cho clearInterval() phương pháp.
Lời khuyên:
- 1000 ms = 1 giây.
- Để thực hiện một chức năng chỉ một lần, sau một số mili giây đã chỉ định, hãy sử dụng
setTimeout()phương pháp.
Phương thức setTimeout của cửa sổ
Các setTimeout() phương thức đặt bộ hẹn giờ tính bằng mili giây, sau đó gọi một hàm hoặc đánh giá một biểu thức khi hết giờ.
Ghi chú:
setTimeout()sử dụng mili giây và 1000 ms bằng 1 giây- Phương thức này chỉ thực thi hàm hoặc biểu thức mà bạn truyền cho nó một lần. Sử dụng
setInterval()phương pháp nếu bạn cần lặp lại việc thực hiện nhiều lần - Để dừng hàm hoặc biểu thức được truyền cho nó, hãy sử dụng
clearTimeout()phương pháp
Cú pháp của setTimout() phương pháp như sau:
setTimeout(function, milliseconds, param1, param2, ...);Ví dụ:
setTimeout(function() {
alert("Hello");
}, 3000);Một điều rất quan trọng cần nhớ về setTimeout() là nó được thực thi không đồng bộ:
console.log("A");
setTimeout(function() { console.log("B"); }, 0);
console.log("C");
// The order in the console will be
// A
// C
// BThứ tự của nhật ký giao diện điều khiển có thể không như bạn mong đợi. Để giải quyết vấn đề này và đảm bảo rằng mã của bạn được thực thi đồng bộ, bạn chỉ cần lồng console.log câu lệnh trong hàm:
console.log("A");
setTimeout(function() {
console.log("B");
console.log("C");
}, 0);
// The order in the console will be
// A
// B
// CPhương thức ClearTimeout của cửa sổ
Các clearTimeout() phương pháp được sử dụng để dừng bộ hẹn giờ được đặt với setTimeout() phương pháp.
clearTimeout(setTimeout_ID); Để có thể sử dụng clearTimeout() phương pháp, bạn phải sử dụng một biến toàn cục. Xem ví dụ bên dưới
Các clearTimeout() phương thức hoạt động bằng cách sử dụng id được trả về bởi setTimeout(). Do đó, thường nên sử dụng một biến toàn cục để lưu trữ setTimeout()sau đó xóa rằng khi cần thiết:
const myTimeout = setTimeout(function, milliseconds);
...
// Later, to clear the timeout
clearTimeout(myTimeout);Window ClearInterval Phương pháp
Các clearInterval() phương pháp được sử dụng để xóa bộ hẹn giờ được đặt bằng setInterval() phương pháp.
clearInterval(setInteval_ID); Các clearTimeout() phương thức hoạt động bằng cách sử dụng id được trả về bởi setInterval(). Do đó, thường nên sử dụng một biến toàn cục để lưu trữ setInterval()sau đó xóa rằng khi cần thiết:
const myInterval = setInterval(function, milliseconds);
...
// Later, to clear the timeout
clearInterval(myInterval);Phương pháp lưu trữ cục bộ cửa sổ
localStorage cung cấp một cách để các ứng dụng web của bạn lưu trữ cục bộ các cặp khóa/giá trị trong trình duyệt của người dùng.
Trước HTML5 và localStorage, dữ liệu ứng dụng web phải được lưu trữ trong cookie. Mọi yêu cầu HTTP đều bao gồm cookie và đây từng là phương pháp hợp pháp để lưu trữ dữ liệu ứng dụng cục bộ trên thiết bị khách. Tuy nhiên, rất nhiều dữ liệu tương tự đã được truyền bằng cookie và vì chúng bị giới hạn ở khoảng 4 KB dữ liệu nên rất khó để lưu trữ mọi thứ mà ứng dụng của bạn cần.
Giới hạn lưu trữ cho localStorage là 10 MB dữ liệu trên mỗi miền và nó được coi là hiệu quả hơn vì thông tin được lưu trữ trong nó không bao giờ được chuyển đến máy chủ với mọi yêu cầu.
Các loại lưu trữ web
localStorage là một trong hai phương pháp hiện đại để trình duyệt lưu trữ dữ liệu cục bộ:
localStorage: Điều này lưu trữ dữ liệu không có ngày hết hạn. dữ liệu tronglocalStoragevẫn tồn tại ngay cả khi trình duyệt của người dùng bị đóng và mở lại.sessionStorage: Điều này tương tự nhưlocalStorage, ngoại trừ việc nó chỉ lưu trữ dữ liệu cho một phiên. Dữ liệu này sẽ bị xóa sau khi người dùng đóng trình duyệt của họ.
Phương thức lưu trữ cục bộ HTML5
localStorage đi kèm với một vài phương thức JavaScript khác nhau giúp làm việc rất dễ dàng.
Để thiết lập dữ liệu:
localStorage.setItem('Name', 'somevalue');Để truy xuất một số dữ liệu từ bộ lưu trữ:
localStorage.getItem('Name');Để xóa hoặc xóa một số dữ liệu:
localStorage.removeItem('Name');Để xóa mọi thứ trong bộ nhớ (không chỉ một mục riêng lẻ):
localStorage.clear();Để có được số lượng thuộc tính trong bộ nhớ:
localStorage.length;Lưu ý: Tất cả các phương pháp trên cũng hoạt động với sessionStorage. Đơn giản chỉ cần thay thế localStorage với sessionStorage.
Phương pháp mở cửa sổ
Cửa sổ open() phương pháp được sử dụng để mở một cửa sổ hoặc tab trình duyệt mới, tùy thuộc vào các tham số và cài đặt trình duyệt của người dùng. Phương pháp này thường được sử dụng cho cửa sổ bật lên và bị chặn theo mặc định trong nhiều trình duyệt hiện đại.
Cú pháp của open() phương pháp là:
const window = window.open(url, windowName, windowFeatures);Thông số
url: Một chuỗi cho tài nguyên bạn muốn tải.windowName: Một chuỗi cho biết tên mục tiêu của cửa sổ hoặc tab mới. Lưu ý rằng điều này sẽ không được sử dụng làm tiêu đề cho cửa sổ/tab mới.windowFeatures: Một danh sách các chuỗi tính năng được phân tách bằng dấu phẩy tùy chọn, chẳng hạn như kích thước của cửa sổ mới, vị trí của nó, có hiển thị thanh menu hay không, v.v.
Ví dụ
let windowObjectReference;
const strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
function openRequestedPopup() {
windowObjectReference = window.open("https://www.freecodecamp.org/", "fCC_WindowName", strWindowFeatures);
}
openRequestedPopup();Đoạn mã trên sẽ cố gắng mở một cửa sổ bật lên tới trang đích freeCodeCamp.
Phương thức xác nhận cửa sổ
Bạn có thể dùng confirm phương pháp yêu cầu người dùng kiểm tra lại quyết định trên một trang web. Khi bạn gọi phương thức này, trình duyệt sẽ hiển thị một hộp thoại với hai lựa chọn dọc theo dòng “OK” và “Cancel”.
Ví dụ: giả sử ai đó vừa nhấp vào nút Xóa. Bạn có thể chạy đoạn mã sau:
if (window.confirm("Are you sure you want to delete this item?")) {
// Delete the item
}Thông báo “Bạn có chắc chắn muốn xóa mục này không?” sẽ xuất hiện trong hộp thoại. Nếu người dùng bấm OK, phương thức xác nhận sẽ trở lại true và trình duyệt sẽ chạy mã bên trong câu lệnh if. Nếu người đó nhấp vào Hủy, phương thức sẽ trả về false và không có gì khác sẽ xảy ra. Điều này cung cấp một số biện pháp bảo vệ chống lại việc ai đó vô tình nhấp vào Xóa.
