JavaScript BOM案例

JavaScript的BOM（瀏覽器對象模型）使得我們能夠在Web瀏覽器環境中操作瀏覽器窗口、頁面元素、Cookie等。下面將列舉一些JavaScript BOM的常見案例。

1. 獲取瀏覽器窗口尺寸

使用JavaScript獲取瀏覽器窗口的尺寸，示例代碼如下：

// 定義獲取窗口寬高的函數
function getWindowSize() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
return { width: width, height: height };
}
// 調用函數
var size = getWindowSize();
console.log('窗口寬度：', size.width, ' 窗口高度：', size.height);

2. 彈出提示框

使用JavaScript彈出提示框，示例代碼如下：

// 彈出警告框
alert('這是一條警告信息！');
// 彈出確認框
if (confirm('確定刪除嗎？')) {
// 用戶點擊了確認按鈕，執行刪除操作
console.log('刪除成功！');
} else {
// 用戶點擊了取消按鈕，返回操作
console.log('已取消刪除！');
}
// 彈出輸入框
var username = prompt('請輸入用戶名：');
console.log('用戶名為：', username);

3. 控制瀏覽器的后退和前進

使用JavaScript控制瀏覽器的后退和前進，示例代碼如下：

// 后退一步
window.history.back();
// 前進一步
window.history.forward();

4. 操作Cookie

使用JavaScript操作Cookie，示例代碼如下：

// 設置Cookie
document.cookie = 'username=admin';
// 獲取Cookie
var cookies = document.cookie.split(';');
for (var i = 0; i< cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf('username=') == 0) {
var username = cookie.substr(9);
console.log('用戶名為：', username);
break;
}
}
// 刪除Cookie
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

以上是JavaScript BOM的常見案例，通過對BOM的學習和應用，我們能夠更好地操作Web瀏覽器環境，提高Web開發的效率。