BOM中如何獲取和設(shè)置窗口的位置？

現(xiàn)代瀏覽器限制腳本控制窗口位置主要是出于安全和用戶體驗考慮。1. 網(wǎng)站若能隨意移動窗口，可能引發(fā)惡意行為，如將窗口移至屏幕外、誘導(dǎo)點擊或釣魚攻擊；2. 瀏覽器采用同源策略和用戶交互模型來限制操作權(quán)限，僅允許腳本控制由window.open()創(chuàng)建的子窗口，且通常需在用戶主動操作下進(jìn)行；3. 這些限制提升了安全性，防止用戶被干擾或欺騙，保障了良好的瀏覽體驗。

獲取和設(shè)置瀏覽器窗口的位置，在bom（Browser Object Model）中主要通過window.screenX和window.screenY屬性來讀取，而設(shè)置則依賴于window.moveTo()和window.moveBy()方法。然而，值得注意的是，出于安全和用戶體驗的考慮，現(xiàn)代瀏覽器對這些操作施加了嚴(yán)格的限制，通常只允許腳本移動或調(diào)整由其自身通過window.open()創(chuàng)建的子窗口，而無法控制主瀏覽器窗口的位置。

獲取窗口位置其實挺直觀的，你可以用window.screenX和window.screenY來拿到當(dāng)前窗口相對于屏幕左上角的像素坐標(biāo)。這兩個屬性會告訴你窗口的左邊緣和上邊緣分別距離屏幕的左邊和上邊有多遠(yuǎn)。

至于設(shè)置窗口位置，我們主要有兩種方式：

1. window.moveTo(x, y): 這個方法允許你將窗口的左上角精確地移動到屏幕上的指定坐標(biāo)(x, y)。比如，window.moveTo(0, 0)就會把窗口移到屏幕的左上角。
2. window.moveBy(dx, dy): 如果你想讓窗口相對于當(dāng)前位置移動，而不是指定一個絕對位置，那么moveBy就派上用場了。它接受兩個參數(shù)：dx表示水平方向的移動量（正值向右，負(fù)值向左），dy表示垂直方向的移動量（正值向下，負(fù)值向上）。比如，window.moveBy(100, 50)會把窗口向右移動100像素，向下移動50像素。

這里有個關(guān)鍵點，也是我個人在實際開發(fā)中經(jīng)常遇到的“坑”：雖然這些方法存在，但你不能指望它們能隨意控制用戶的瀏覽器窗口?，F(xiàn)代瀏覽器的安全策略非常嚴(yán)格，它們知道用戶最討厭什么——那就是網(wǎng)頁未經(jīng)允許就亂動自己的窗口。所以，絕大多數(shù)情況下，moveTo和moveBy只對那些由你的腳本通過window.open()創(chuàng)建的“彈出窗口”有效。對于用戶自己打開的主瀏覽器窗口，這些方法幾乎總是被忽略的。

// 獲取當(dāng)前窗口位置 let currentX = window.screenX; let currentY = window.screenY; console.log(`當(dāng)前窗口位置：X=${currentX}, Y=${currentY}`);  // 嘗試移動窗口（通常只對 window.open() 創(chuàng)建的窗口有效） // let newWindow = window.open('about:blank', '_blank', 'width=300,height=200'); // if (newWindow) { //     newWindow.onload = () => { // 確保窗口加載后再嘗試移動 //         newWindow.moveTo(100, 100); // 移動到屏幕坐標(biāo) (100, 100) //         console.log('嘗試將新窗口移動到 (100, 100)'); //     }; //     setTimeout(() => { //         if (newWindow && !newWindow.closed) { //             newWindow.moveBy(50, 50); // 相對于當(dāng)前位置再移動 (50, 50) //             console.log('嘗試將新窗口相對移動 (50, 50)'); //         } //     }, 2000); // } else { //     console.log('無法打開新窗口或被瀏覽器阻止'); // }

為什么現(xiàn)代瀏覽器限制了腳本對窗口位置的控制？

這背后其實是用戶體驗和網(wǎng)絡(luò)安全的一場博弈。試想一下，如果任何網(wǎng)頁都能隨意移動你的瀏覽器窗口，那會是怎樣一種災(zāi)難？惡意網(wǎng)站可能會把你拖到屏幕邊緣，或者在你不知情的情況下把窗口移到看不見的地方，然后彈出各種廣告，甚至進(jìn)行釣魚攻擊，比如模擬系統(tǒng)彈窗或者覆蓋其他應(yīng)用。

所以，瀏覽器的開發(fā)者們早就意識到了這一點。為了保護(hù)用戶免受這些騷擾和潛在的安全威脅，他們普遍采取了嚴(yán)格的同源策略（Same-Origin Policy）以及更廣泛的用戶交互安全模型。這意味著，只有當(dāng)一個窗口是由你的腳本明確創(chuàng)建的（通過window.open()），并且通常是在用戶某個操作（比如點擊按鈕）的直接響應(yīng)下，你才可能對其進(jìn)行有限的控制。即使是這樣，很多瀏覽器依然會給用戶選擇權(quán)，比如允許用戶手動關(guān)閉彈出窗口，或者干脆阻止腳本對窗口大小和位置的修改。

這種限制，雖然有時會讓開發(fā)者覺得束手束腳，但從宏觀角度看，它極大地提升了互聯(lián)網(wǎng)的安全性，也讓用戶在使用瀏覽器時感到更安心，不會被各種“窗口魔術(shù)”所困擾。

獲取窗口位置時，screenX和screenY與screenLeft和screenTop有何區(qū)別？

在獲取窗口位置時，你可能會看到兩種不同的屬性對：screenX/screenY和screenLeft/screenTop。從功能上講，它們都是用來表示瀏覽器窗口左上角相對于屏幕左上角的像素坐標(biāo)。然而，它們之間存在一些歷史和兼容性上的差異。

window.screenX和window.screenY是W3C標(biāo)準(zhǔn)中定義的屬性，因此它們是跨瀏覽器兼容性最好的選擇。幾乎所有的現(xiàn)代瀏覽器都支持并推薦使用這兩個屬性來獲取窗口的屏幕坐標(biāo)。

而window.screenLeft和window.screenTop則主要是ie瀏覽器早期引入的屬性。雖然在一些非IE瀏覽器中，為了兼容性也可能支持它們，但它們并非標(biāo)準(zhǔn)。在實際開發(fā)中，如果你的目標(biāo)用戶群體中仍然有使用非常老舊的IE瀏覽器的情況，你可能會考慮使用它們作為備用方案，或者干脆用一個簡單的邏輯來判斷：

let posX = window.screenX !== undefined ? window.screenX : window.screenLeft; let posY = window.screenY !== undefined ? window.screenY : window.screenTop; console.log(`窗口位置（兼容性處理后）：X=${posX}, Y=${posY}`);

但在大多數(shù)現(xiàn)代Web開發(fā)場景中，直接使用screenX和screenY就足夠了，它們更符合當(dāng)前的web標(biāo)準(zhǔn)和最佳實踐。

除了移動窗口，BOM中還有哪些與窗口大小和位置相關(guān)的操作？

除了移動窗口，BOM還提供了一系列方法和屬性來處理窗口的大小。這些操作同樣受到現(xiàn)代瀏覽器的嚴(yán)格安全限制，通常也只對通過window.open()創(chuàng)建的子窗口有效。

1. 設(shè)置窗口大?。?/strong>

   • window.resizeTo(width, height): 這個方法允許你將窗口調(diào)整到指定的絕對寬度和高度（以像素為單位）。比如，newWindow.resizeTo(800, 600)會將新窗口調(diào)整為800像素寬、600像素高。
   • window.resizeBy(dWidth, dHeight): 如果你想讓窗口相對于當(dāng)前大小進(jìn)行調(diào)整，可以使用resizeBy。它接受兩個參數(shù)：dWidth表示水平方向的調(diào)整量，dHeight表示垂直方向的調(diào)整量。正值表示增大，負(fù)值表示減小。比如，newWindow.resizeBy(100, -50)會使窗口寬度增加100像素，高度減少50像素。

2. 獲取窗口大小： 這部分就比較有趣了，因為有多種“大小”可以獲取，它們代表的含義也略有不同：

   • window.innerWidth / window.innerHeight: 這兩個屬性獲取的是瀏覽器視口（viewport）的寬度和高度，不包括瀏覽器自身的工具欄、滾動條、邊框等“chrome”部分。它們代表了網(wǎng)頁內(nèi)容實際可用的顯示區(qū)域大小。這在響應(yīng)式設(shè)計和動態(tài)布局中非常有用。
   • window.outerWidth / window.outerHeight: 這兩個屬性則獲取的是整個瀏覽器窗口的寬度和高度，包括了瀏覽器自身的工具欄、地址欄、書簽欄以及邊框等所有部分。它反映了瀏覽器應(yīng)用本身在屏幕上占據(jù)的實際物理空間。
   • document.documentElement.clientWidth / document.documentElement.clientHeight: 這對屬性獲取的是文檔根元素（）的寬度和高度，通常也代表了視口的大小，但它會排除滾動條的寬度。在某些布局計算中，這比window.innerWidth/innerHeight更精確，因為它只關(guān)注內(nèi)容區(qū)域。