舉例說明常用的BOM屬性和方法有哪些？

王铁柱6發表於2024-11-29

好的，以下是一些常用的 BOM 屬性和方法的示例，並附帶說明：

Window 物件屬性:

  • innerWidth / innerHeight: 獲取瀏覽器視窗內部的寬度和高度（不包括選單欄、工具欄等）。

    console.log("Inner Width:", window.innerWidth);
console.log("Inner Height:", window.innerHeight);

  • outerWidth / outerHeight: 獲取瀏覽器視窗外部的寬度和高度（包括選單欄、工具欄等）。

    console.log("Outer Width:", window.outerWidth);
console.log("Outer Height:", window.outerHeight);

  • screen.width / screen.height: 獲取使用者螢幕的寬度和高度。

    console.log("Screen Width:", screen.width);
console.log("Screen Height:", screen.height);

  • location: 包含當前 URL 的資訊。 一些常用的屬性包括：

    • href: 獲取或設定完整的 URL。
    • pathname: 返回 URL 的路徑部分。
    • hostname: 返回 URL 的主機名。
    • protocol: 返回 URL 的協議。
    console.log("Current URL:", window.location.href);
console.log("Pathname:", window.location.pathname);
window.location.href = "https://www.example.com"; // 跳轉到新頁面

  • navigator: 包含瀏覽器的資訊。

    • userAgent: 返回使用者代理字串，可以用來識別瀏覽器型別和版本。
    • platform: 返回執行瀏覽器的作業系統平臺。
    console.log("User Agent:", window.navigator.userAgent);
console.log("Platform:", window.navigator.platform);

Window 物件方法:

  • alert(): 顯示一個警告框。

    alert("Hello, world!");

  • confirm(): 顯示一個確認框，返回 true 或 false。

    let confirmed = confirm("Are you sure?");
if (confirmed) {
  // 使用者點選了“確定”
} else {
  // 使用者點選了“取消”
}

  • prompt(): 顯示一個輸入框，返回使用者輸入的值或 null。

    let name = prompt("Please enter your name:", "Guest");
if (name != null) {
  console.log("Hello, " + name + "!");
}

  • open(): 開啟一個新的瀏覽器視窗或標籤頁。

    window.open("https://www.google.com", "_blank");

  • close(): 關閉當前視窗或標籤頁。

    window.close(); // 通常只允許關閉透過 JavaScript 開啟的視窗

  • setTimeout(): 設定一個定時器，在指定時間後執行一次程式碼。

    setTimeout(() => {
  console.log("This will run after 2 seconds");
}, 2000); // 2000 毫秒 = 2 秒

  • setInterval(): 設定一個定時器，每隔指定時間重複執行程式碼。

    let intervalId = setInterval(() => {
  console.log("This will run every second");
}, 1000);

// 停止定時器
clearInterval(intervalId);

  • scrollTo(): 滾動視窗到指定位置。

    window.scrollTo(0, 100); // 滾動到垂直位置 100px

這只是一些常用的 BOM 屬性和方法，還有很多其他的屬性和方法可以用來操作瀏覽器視窗和文件。 建議查閱 MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/API/Window) 獲取更完整的 BOM 參考。

相關文章