js bom window對象

2019年8月24日 100次阅读 来源: 梁鳳波

一、全局作用域

我們全局作用域定義了一個變量name，window對象下也能接見，證實在全局作用域下定義的變量，會自動歸入window對象。

var name = "Bob";

console.log(name); // Bob
console.log(window.name); // Bob

未聲明的變量不能應用，並且會拋出未定義毛病提醒，但window下尋覓未定義的變量，會拋出undefined，由於window對象查詢是對象的一次查詢屬性。

console.log(age); // ReferenceError: age is not defined
console.log(window.age); // undefined

二、窗口位置

IE,Safari,Opera, Chome 都供應了screenLeft和screenTop屬性，離別示意對窗口相對於屏幕的左側和上邊的位置。

《js bom window對象》

// 窗口位置
let leftPos = (typeof window.screenLeft === 'number') ?
    window.screenLeft : window.screenX;

let topPos = (typeof window.screenTop === 'number') ?
    window.screenTop : window.screenY;

console.log(leftPos, topPos);

這個例子應用二元操作符起首肯定screenLeft和screenTop屬性是不是存在，假如是（在IE、Safari、Opera和Chrome中），則獲得這兩個屬性的值。假如不存在（在Firefox中），則獲得screenX和screenY的值。

三、窗口挪動

須要注重的是，這兩個要領能夠會被瀏覽器禁用；而且，在Opera和IE 7（及更高版本）中默許就是禁用的。別的，這兩個要領都不適用於框架，只能對最外層的window對象應用。

moveTo()和moveBy()要領卻是有能夠將窗口精確地挪動到一個新位置。這兩個要領都吸收兩個參數，个中moveTo()吸收的是新位置的x和 y坐標值，而moveBy()吸收的是在水溫和垂直方向上挪動的像素數

//將窗口挪動到屏幕左上角
window.moveTo(0,0);

//將窗向下挪動100像素
window.moveBy(0,100);

//將窗口挪動到(200,300)
window.moveTo(200,300);

//將窗口向左挪動50像素
window.moveBy(-50,0);

四、窗口大小

let pageWidth = window.outerWidth,
    pageHeight = window.outerHeight;

if (typeof pageWidth != 'number') {
    if (document.compatMode == 'CSS1Compat') {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
    
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

console.log('pageWidth, pageHeight: ', pageWidth, pageHeight);

在以上代碼中，我們起首將window.innerWidth和window.innerHeight的值離別賦給了pageWidth和pageHeight。然後搜檢pageWidth中保留的是不是是一個數值；假如不是，則經由過程搜檢document.compatMode（這個屬性將在第10章周全議論）來肯定頁面是不是處於規範形式。假如是，則離別應用document.documentElement.clientWidth和document.documentElement.clientHeight的值。不然，就應用document.body.clientWidth和document.body.clientHeight的值。

// 調解瀏覽器窗口的大小
// resizeTo()吸收瀏覽器窗口的新寬度和新高度，而resizeBy()吸收新窗口與原窗口的寬度和高度之差

//調解到100×100
window.resizeTo(100, 100);

//調解到200×150
window.resizeBy(100, 50);

//調解到 300×300
window.resizeTo(300, 300);

五、導航和翻開窗口

應用window.open()要領既能夠導航到一個特定的URL，也能夠翻開一個新的瀏覽器窗口

// _self、_parent、_top或_blank。
window.open('https://baidu.com', '_blank');

// 即是
< a href="https://baidu.com" target="_blank"></a>
// 翻開窗口再封閉
var wroxWin = window.open("http://www.baidu.com/", "wroxWindow",
    "height=400,width=400,top=10,left=10,resizable=yes");


setTimeout(() => {
    wroxWin.close();
    console.log('end..');
}, 5000);

六、體系對話框

瀏覽器經由過程alert()、confirm()和prompt()要領能夠挪用體系對話框向用戶顯現音訊

alert

alert("Hello world!")

confirm

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure! ");
} else {
    alert("I'm sorry to hear you're not sure. ");
}

prompt

var result = prompt("What is your name? ", "");
if (result !== null) {
    alert("Welcome, " + result);
}
    原文作者：梁鳳波
    原文地址: https://segmentfault.com/a/1190000015318371
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞