亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

JavaScript中的BOM基礎(chǔ)與window對(duì)象詳解

admin
2025年7月17日 0:8 本文熱度 213

一、BOM是什么?

BOM全稱(chēng)Browser Object Model(瀏覽器對(duì)象模型), 它提供了與瀏覽器窗口交互的對(duì)象和方法. 簡(jiǎn)單來(lái)說(shuō):

  • DOM: 操作網(wǎng)頁(yè)內(nèi)容(HTML元素).

  • BOM: 操作瀏覽器窗口和行為.


想象一下, DOM是你房間里的家具(可以移動(dòng)、修改), 而B(niǎo)OM是你房間的窗戶(hù)和門(mén)(可以打開(kāi)、關(guān)閉、調(diào)整大小).

BOM的核心是window對(duì)象, 它是JavaScript在瀏覽器中的全局對(duì)象. 我們常用的alert()、setTimeout()其實(shí)都是window的方法.

二、window對(duì)象

window對(duì)象有兩個(gè)重要身份:

  1. 全局對(duì)象:在瀏覽器中, 所有全局變量和函數(shù)都是window的屬性和方法.

  2. 瀏覽器窗口: 代表瀏覽器窗口或標(biāo)簽頁(yè).

var myVar = "Hello";
console.log(window.myVar); //"Hello"-全局變量成為window的屬性console.log(myVar === window.myVar); //true
function sayHi() {  console.log("Hi!");}
window.sayHi(); //"Hi!"-全局函數(shù)成為window的方法

2.1 常用window屬性

讓我們看看window對(duì)象有哪些實(shí)用的屬性:

1) window.innerWidth/window.innerHeight: 獲取瀏覽器窗口的內(nèi)部寬度和高度(不包括工具欄和滾動(dòng)條)

2) window.outerWidth/window.outerHeight: 獲取整個(gè)瀏覽器窗口的寬度和高度

3) window.location: 獲取當(dāng)前頁(yè)面的URL信息

4) window.navigator: 獲取瀏覽器信息, 例如: window.navigator.userAgent

5) window.screen: 獲取用戶(hù)屏幕信息, 例如: window.screen.width, window.screen.height

2.2 常用window方法

window對(duì)象提供了許多實(shí)用的方法:

  • 彈窗類(lèi):

    alert(): 警告框

    confirm(): 確認(rèn)框(返回true/false)

    prompt(): 輸入框(返回用戶(hù)輸入或null)


  • 定時(shí)器:

    setTimeout(): 延遲執(zhí)行

    setInterval(): 循環(huán)執(zhí)行

    clearTimeout()/clearInterval(): 清除定時(shí)器


  • 窗口操作:

    open():打開(kāi)新窗口

    close(): 關(guān)閉窗口

    moveTo()/moveBy(): 移動(dòng)窗口

    resizeTo()/resizeBy(): 調(diào)整窗口大小


2.3 瀏覽器窗口操作示例

1) 打開(kāi)新窗口:

const newWindow = window.open(  "https://www.example.com",  //URL  "exampleWindow",           //窗口名稱(chēng)  "width=600,height=400"     //窗口規(guī)格);

參數(shù)說(shuō)明:

  • URL: 要加載的頁(yè)面(可為空).

  • 窗口名稱(chēng): 可以作為<a target="...">的目標(biāo).

  • 窗口規(guī)格: 逗號(hào)分隔的設(shè)置字符串.


窗口規(guī)格常用選項(xiàng): 

  • width/height: 窗口尺寸.

  • left/top: 窗口位置.

  • menubar/toolbar/scrollbars: 是否顯示菜單欄/工具欄/滾動(dòng)條(yes/no).


2)關(guān)閉窗口: 

//關(guān)閉當(dāng)前窗口window.close();
//關(guān)閉由open()打開(kāi)的窗口newWindow.close();

通常只能關(guān)閉由JavaScript打開(kāi)的窗口, 瀏覽器出于安全限制, 不允許腳本隨意關(guān)閉用戶(hù)打開(kāi)的窗口. 

3) 調(diào)整窗口的大小和位置: 

//將窗口移動(dòng)到(100, 200)位置window.moveTo(100200);
//將窗口向右移動(dòng)50px,向下移動(dòng)30pxwindow.moveBy(5030);
//將窗口調(diào)整為800x600window.resizeTo(800600);
//將窗口寬度增加100px,高度減少50pxwindow.resizeBy(100, -50);

出于用戶(hù)體驗(yàn)和安全考慮, 這些方法通常只能用于由window.open()創(chuàng)建的窗口, 或需要用戶(hù)先與頁(yè)面交互后才能使用.

4)窗口位置關(guān)系:
//判斷窗口是否已關(guān)閉if (newWindow.closed) {  console.log("新窗口已關(guān)閉");}
//使當(dāng)前窗口獲得焦點(diǎn)window.focus();
//使當(dāng)前窗口失去焦點(diǎn)window.blur();
三、全局作用域及實(shí)用示例
1) window與全局作用域的關(guān)系:
var聲明的變量會(huì)成為全局變量:
var globalVar = "我是全局變量";
// 以下等價(jià)console.log(globalVar);        //"我是全局變量"console.log(window.globalVar); //"我是全局變量"
函數(shù)聲明同樣如此: 
function globalFunc() {  console.log("我是全局函數(shù)");}
//以下等價(jià)globalFunc();        //"我是全局函數(shù)"window.globalFunc(); //"我是全局函數(shù)"
ES6的letconst聲明的變量不會(huì)成為window的屬性: 
let localLet = "我是let變量";const localConst = "我是const常量";
console.log(window.localLet);   //undefinedconsole.log(window.localConst); //undefined
2) 一些實(shí)用的窗口交互示例:
全屏切換: 
//進(jìn)入全屏function enterFullscreen() {  const element = document.documentElement;  if (element.requestFullscreen) {    element.requestFullscreen();  } else if (element.webkitRequestFullscreen) { /*Safari*/    element.webkitRequestFullscreen();  } else if (element.msRequestFullscreen) { /*IE11*/    element.msRequestFullscreen();  }}
//退出全屏function exitFullscreen() {  if (document.exitFullscreen) {    document.exitFullscreen();  } else if (document.webkitExitFullscreen) { /*Safari*/    document.webkitExitFullscreen();  } else if (document.msExitFullscreen) { /*IE11*/    document.msExitFullscreen();  }}
檢測(cè)窗口大小變化: 
//監(jiān)聽(tīng)窗口大小變化window.addEventListener("resize"() => {  console.log(`窗口大小已改變:${window.innerWidth} x ${window.innerHeight}`);
  //響應(yīng)式設(shè)計(jì)常用技巧  if (window.innerWidth < 768) {    console.log("小屏幕布局");  } else {    console.log("大屏幕布局");  }});
頁(yè)面滾動(dòng)控制: 
//獲取當(dāng)前滾動(dòng)位置const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
//滾動(dòng)到指定位置(平滑滾動(dòng))window.scrollTo({  top500,  behavior"smooth"});
//滾動(dòng)到頁(yè)面頂部function scrollToTop() {  window.scrollTo({ top0behavior"smooth" });}
//滾動(dòng)到頁(yè)面底部function scrollToBottom() {  window.scrollTo({     topdocument.body.scrollHeight    behavior"smooth"   });}
四、總結(jié)
好了, 今天的文章就講到這里了, 記住, 雖然window對(duì)象功能強(qiáng)大, 但現(xiàn)代Web開(kāi)發(fā)更強(qiáng)調(diào)用戶(hù)體驗(yàn), 很多傳統(tǒng)的窗口操作(如頻繁彈窗)已經(jīng)不推薦使用. 合理利用這些API, 可以創(chuàng)建既功能強(qiáng)大又用戶(hù)友好的Web應(yīng)用.

閱讀原文:原文鏈接


該文章在 2025/7/17 10:09:34 編輯過(guò)
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專(zhuān)業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車(chē)隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類(lèi)企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷(xiāo)售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶(hù)的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved