Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga,
Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web
Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook 1- BOM Là gì? Mô hình đối tượng trình duyệt (Brower Object Model - BOM) bao gồm các thuộc tính (property), các phương thức (method) được cung cấp bởi trình duyệt để JavaScript có thể
tương tác với trình duyệt. Có rất nhiều các trình duyệt đang cùng tồn tại như Firefox, Chrome, IE, Opera,.. Mỗi trình duyệt lại có một tiêu chuẩn riêng, vì vậy BOM hơi khác nhau với các trình duyệt khác nhau. Không có một tiêu chuẩn chính thức nào cho BOM. Thật may mắn các trình duyệt mới dang dần hỗ trợ các tiêu chuẩn được sử dụng rộng rãi. Hãy xem cách lấy thông tin chiều rộng và chiều cao của cửa sổ trình duyệt để thấy được sự
khác biệt giữa các trình duyệt: window.innerWidth được hỗ trợ bởi các trình duyệt Firefox, Chrome, Opera, IE 9+ nhưng không được hỗ trợ bởi trình duyệt IE 8 (Hoặc cũ hơn), và bạn phải sử dụng document.documentElement.clientWidth hoặc document.body.clientWidth. 2- Đối tượng window Đối tượng window là một đối tượng quan trọng nhất trong BOM, nó đại diện cho cửa sổ trình duyệt và được hỗ trợ bởi tất cả các trình duyệt. Tất cả các đối tượng Javascript toàn cục (global), các hàm toàn cục, các biến toàn cục đều là thành viên của đối tượng window. Ví dụ, document là một đối tượng toàn cục, nó là một thuộc tính (property) của đối
tượng window, bạn có thể truy cập vào nó thông qua cú pháp window.document hoặc đơn giản là document.
var element = window.document.getElementById("someId");
// Same as:
var element = document.getElementById("someId");
Hàm alert("something") là một hàm toàn cục (global), nó là một thành viên của đối tượng window. Vì vậy bạn có thể sử dụng nó theo các cách dưới đây:
alert("Hello! I am an alert box!!");
// Same as:
window.alert("Hello! I am an alert box!!");
Nếu bạn tạo ra một biến toàn cục, hoặc một hàm toàn cục thì chúng các thành viên của đối tượng
window. Xem ví dụ: global-func-variable-example.html
<!DOCTYPE html>
<html>
<head>
<title>Window Example</title>
<meta charset="UTF-8">
<script>
// A Global Variable
var COPY_RIGHT = "o7planning.org";
// A Global Function
function sayHello() {
alert("Hello Everyone!");
}
</script>
</head>
<body>
<h2>Global Variable, Global Function</h2>
<button onClick="alert(COPY_RIGHT)">Call alert(COPY_RIGHT)</button>
<button onClick="alert(window.COPY_RIGHT)">Call alert(window.COPY_RIGHT)</button>
<br><br>
<button onClick="sayHello()">Call sayHello()</button>
<button onClick="window.sayHello()">Call window.sayHello()</button>
</body>
</html>
3- Vị trí, kích thước,.. Các thuộc tính (property) để xác định kích thước, vị trí ,.. của cửa sổ trình duyệt: 
| Property
| Read Only
| Mô tả
| | window.innerHeight
| Y
| Lấy chiều cao của vùng nội dung của cửa sổ trình duyệt. Hoặc, nó chính là chiều cao của thanh cuộn thẳng đứng (Nếu thanh cuộn đứng hiển thị).
| | window.innerWidth
| Y
| Lấy chiều rộng của vùng nội dung của cửa sổ trình duyệt. Hoặc, nó chính là chiều rộng của thanh cuộn nằm ngang (Nếu thanh cuộn nằm ngang hiển thị).
| | window.outerHeight
| Y
| Lấy chiều cao bên ngoài của cửa sổ trình duyệt.
| | window.outerWidth
| Y
| Lấy chiều rộng bên ngoài của cửa sổ trình duyệt.
| window.screenX
window.screenLeft
| Y
| Cả hai thuộc tính (property) này trả về khoảng cách theo phương ngang từ cạnh trái của trình duyệt tới cạnh trái của màn hình.
| window.screenY
window.screenTop
| Y
| Cả hai thuộc tính (property) này trả về khoảng cách theo phương thẳng đứng từ cạnh trên của trình duyệt tới cạnh trên của màn hình.
| window.scrollX
window.pageXOffset
| Y
| Trả về số pixel mà document đã được cuộn theo phương ngang.
| window.scrollY
window.pageYOffset
| Y
| Trả về số pixel mà document đã được cuộn theo phương thẳng đứng.
|
Ví dụ: window-example.html
<!DOCTYPE html>
<html>
<head>
<title>Window Example</title>
<meta charset="UTF-8">
</head>
<body>
<h3>Window example</h3>
<button onClick="showInfos()">Show Infos</button>
<textarea name="name" style="width:100%;margin-top:10px;"
rows="8" id="log-area"></textarea>
<script>
function showInfos() {
var logArea = document.getElementById("log-area");
logArea.value = "";
logArea.value += "window.outerHeight= " + window.outerHeight +"\n";
logArea.value += "window.innerHeight= " + window.innerHeight +"\n";
logArea.value += "window.outerWidth= " + window.outerWidth +"\n";
logArea.value += "window.innerWidth= " + window.innerWidth +"\n";
logArea.value += "window.screenX= " + window.screenX +"\n";
logArea.value += "window.screenY= " + window.screenY +"\n";
logArea.value += "window.scrollX= " + window.scrollX +"\n";
logArea.value += "window.scrollY= " + window.scrollY +"\n";
}
showInfos();
</script>
</body>
</html>
Các phương thức giúp thay đổi kích thước, vị trí,.. của cửa sổ trình duyệt: 4- window.status Thuộc tính (property) status của đối tượng window giúp bạn thiết lập một nội dung văn bản hiển thị trên thanh trạng thái (Phía dưới cùng của trình duyệt). Tuy nhiên vì lý do bảo mật hầu hết các trình duyệt đều vô hiệu hóa tính
năng này đối với JavaScript. Tuy nhiên nếu người dùng muốn họ có thể bật (enable) tính năng này cho JavaScript bằng cách vào "Tùy Chọn" của trình duyệt. Người dùng trước khi nhấn vào một liên kết họ thường di chuyển chuột trên bề mặt của liên kết để xem trước địa chỉ của liên kết đó đang hiển thị ở thanh trạng thái (status bar),
và chỉ nhấn vào liên kết này khi họ cảm thấy an toàn. Một số website có thể lợi dụng window.status để hiển thị một nội dung giả mạo. 5- Window, Frame Một trang có thể chứa các Frame, và một Frame có thể chứa các Frame khác, chúng tạo thành một hệ thống phân cấp các Frame.
| Property
| Read Only
| Description
| | window.name
|
| Lấy hoặc sét đặt tên cho cửa sổ.
| | window.frameElement
| Y
| Trả về phần tử (element) mà cửa sổ này đang được nhúng (embedded) vào, hoặc null nếu cửa sổ này không được nhúng.
| | window.frames
| Y
| Trả về một mảng các frame bên trong cửa sổ hiện tại.
| | window.length
| Y
| Trả về số lượng các frame bên trong cửa sổ hiện tại. Xem thêm window.frames.
| | window.parent
| Y
| Trả về tham chiếu tới cửa sổ cha của cửa sổ (hoặc frame) hiện thời.
| | window.self
| Y
| Trả về một đối tượng tham chiếu tới chính đối tượng window.
| | window.opener
| Y
| Trả về một tham chiếu tới cửa sổ đã mở ra cửa sổ hiện tại.
| window[0],
window[1],
etc.
| Y
| Trả về một tham chiếu tới đối tượng cửa sổ trong frames. Xem thêm window.frames.
| | window.top
| Y
| Trả về một tham chiếu tới cửa sổ trên cùng (topmost) trong hệ thống phân cấp các cửa sổ.
|
window.frameElement Ví dụ với window.frameElement: frameElement-example.html
<!DOCTYPE html>
<html>
<head>
<title>window.frameElement</title>
<meta charset="UTF-8">
<style>iframe {height: 120px; width: 100%}</style>
</head>
<body>
<h3>Main Frame</h3>
<a href="">Reset</a>
<p>window.frameElement example</p>
<p style="color:red;">Note: You need to test this example on a http server. </p>
<iframe src="frame-a.html"><iframe>
</body>
</html>
frame-a.html
<!DOCTYPE html>
<html>
<head>
<title>frame-a.html</title>
<meta charset="UTF-8">
<script>
function highlightIFrame() {
// <iframe> element.
var iframeElement = window.frameElement;
if(iframeElement) {
iframeElement.style.border="1px solid red";
}
}
</script>
</head>
<body>
<h2>frame-a.html</h2>
<button onClick="highlightIFrame()">Highlight IFrame</button>
</body>
</html>
6- Các đối tượng khác
| Property
| Read Only
| Mô tả
| | window.document
| Y
| Trả về một tham chiếu (reference) tới document mà cửa sổ trình duyệt đang chứa.
| | window.location
| Y
| Trả về một tham chiếu tới đối tượng location với các thông tin về URL của document.
| | window.locationbar
| Y
| Trả về đối tượng locationbar, mà nó có thể đang được nhìn thấy trên cửa sổ trình duyệt.
| | window.personalbar
| Y
| Trả về đối tượng personalbar, mà nó có thể đang được nhìn thấy trên cửa sổ trình duyệt.
| | window.scrollbars
| Y
| Trả về đối tượng scrollbars, mà nó có thể đang được nhìn thấy trên cửa sổ trình duyệt.
| | window.menubar
| Y
| Trả về đối tượng menubar, mà nó có thể đang được nhìn thấy trên cửa sổ trình duyệt.
| | window.navigator
| Y
| Trả về một tham chiếu tới đối tượng navigator.
| | window.screen
| Y
| Trả về một tham chiếu đến đối tượng screen liên hợp với cửa sổ trình duyệt.
| | window.statusbar
| Y
| Trả về đối tượng statusbar, mà nó có thể đang được nhìn thấy trên cửa sổ trình duyệt.
| | window.toolbar
| Y
| Trả về đối tượng toolbar, mà nó có thể đang được nhìn thấy trên cửa sổ trình duyệt.
| | window.visualViewport
| Y
| Trả về đối tượng VisualViewport đại diện cho khung hình (viewport) trực quan của cửa sổ.window.location
|
| Property
| Read Only
| Description
| | window.console
| Y
| Trả về tham chiếu tới đối tượng console, giúp ich cho các lập trình viên gỡ rối (debug) ứng dụng.
| | window.localStorage
| Y
| Trả về một tham chiếu tới đối tượng lưu trữ cục bộ (local storage object), nó chứa các dữ liệu đặc biệt, mà chỉ nguồn gốc tạo ra dữ liệu này mới có thể truy cập vào dữ liệu mà nó tạo ra.
| | window.sessionStorage
| Y
| Trả về một tham chiếu đến đối tượng lưu trữ phiên (session storage object), chứa dữ liệu tồn tại trong vòng đời của một trang. Nếu trang bị đóng, dữ liệu này sẽ bị loại bỏ.
| | window.history
| Y
| Trả về một tham chiếu tới đối tượng history.
| | window.customElements
| Y
| Trả về một tham chiếu đến đối tượng CustomElementRegistry, có thể được sử dụng để đăng ký các phần tử tùy chỉnh mới và lấy thông tin về các phần tử tùy chỉnh đã đăng ký trước đó.
| | window.crypto
| Y
| Trả về đối tượng trình duyệt crypto.
| | window.performance
| Y
| Trả về một đối tượng Performance (Hiệu xuất), bao gồm các thuộc tính (property) thời gian và điều hướng (navigation), mỗi thuộc tính là một đối tượng cung cấp dữ liệu liên quan đến hiệu suất.
| | window.returnValue
|
| Khi một cửa sổ (hoặc một dialog) bị đóng, nó có thể gán giá trị cho window.returnValue, và các cửa sổ khác có thể sử dụng giá trị này.
|
| 
