js bom window對象

Hydrogen 發(fā)布于2019-08-22 18:07 / 2805人閱讀

摘要：一全局作用域我們全局作用域定義了一個變量，對象下也能訪問，證明在全局作用域下定義的變量，會自動納入對象。另外，這兩個方法都不適用于框架，只能對最外層的對象使用。

一、全局作用域

我們全局作用域定義了一個變量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屬性，分別表示對窗口相對于屏幕的左邊和上邊的位置。

// 窗口位置
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()方法倒是有可能將窗口精確地移動到一個新位置。這兩個方法都接收兩個參數(shù)，其中moveTo()接收的是新位置的x和 y坐標值，而moveBy()接收的是在水平和垂直方向上移動的像素數(shù)

//將窗口移動到屏幕左上角
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中保存的是不是一個數(shù)值；如果不是，則通過檢查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  target="_blank">

// 打開窗口再關閉
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);

六、系統(tǒng)對話框

瀏覽器通過alert()、confirm()和prompt()方法可以調用系統(tǒng)對話框向用戶顯示消息

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);
}

云服務器 GPU云服務器 js_window對象屬性 window對象 Window窗口對象 window對象的方法

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95510.html

簡簡單單認識js里的Bom對象

摘要：里面的對象是什么是瀏覽器對象，全拼為都有什么對象是中的頂級對象，所有定義在全局作用域中的變量函數(shù)都會變成對象的屬性和方法，在調用的時候可以省略。 js里面的Bom對象 showImg(https://segmentfault.com/img/remote/1460000010691602); Bom是什么？ Bom是瀏覽器對象，全拼為Browser Object Model Bom都有...

CoffeX 2019-08-20 18:53 評論0 收藏0
bom基礎

摘要：里面的對象什么是是瀏覽器對象，全拼為瀏覽器對象模型是的縮寫，簡稱瀏覽器對象模型提供了獨立于內容而與瀏覽器窗口進行交互的對象由于主要用于管理窗口與窗口之間的通訊，因此其核心對象是由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性缺乏標 js里面的Bom對象什么是Bom Bom是瀏覽器對象，全拼為（Browser Object Model）瀏覽器對象模型 BOM是browser...

shusen 2019-08-20 18:54 評論0 收藏0
JS系列之BOM

摘要：顧名思義，父對象始終指向當前框架的直接上層框架。與框架有關的最后一個對象是，它始終指向實際上，和對象可以互換使用。同時，這也意味著可以將不同層次的對象連綴起來，例如。對象就是判斷用戶的瀏覽器以及操作系統(tǒng)。 BOM BOM Browser Object Model, 瀏覽器對象模型showImg(https://segmentfault.com/img/bVbjS3b?w=663&h=4...

edagarli 2019-08-26 13:25 評論0 收藏0
js bom location對象

摘要：一對象獲取獲取服務器名稱和端口號獲取服務器名稱和端口號獲取服務器名稱和端口號獲取不帶端口號的服務器名稱獲取不帶端口號的服務器名稱獲取整個獲取整個返回中的目錄和或文件名返回中的目錄和或文件名返回的端口號返回的端口號返回的協(xié)議返回的協(xié)議返回的查一、location對象 http://localhost:8881/javascript/BOM/window.html?name=bob&ag...

Carson 2019-08-22 18:08 評論0 收藏0
js中的bom對象

摘要：在瀏覽器中，對象有雙重角色，它既是通過訪問瀏覽器窗口的一個接口，又是規(guī)定的對象。在集合中，可以通過數(shù)值索引從開始，從左至右，從上到下或者框架名稱來訪問相應的對象。 ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（瀏覽器對象模型）則無疑才是真正的核心。BOM 提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網(wǎng)頁內容無關....

dailybird 2019-08-21 10:44 評論0 收藏0
Javascript學習總結 - JS基礎系列三

摘要：案例每隔毫秒調用函數(shù)并顯示時間。當點擊按鈕時，停止時間代碼如下計時器每隔毫秒調用函數(shù)，并將返回值賦值給計時器計時器，在載入后延遲指定時間后去執(zhí)行一次表達式僅執(zhí)行一次。該值標識要取消的延遲執(zhí)行代碼塊。簡述本系列將持續(xù)更新Javascript基礎部分的知識，誰都想掌握高端大氣的技術，但是我覺得沒有一個扎實的基礎，我認為一切高階技術對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把...

zlyBear 2019-08-19 17:07 評論0 收藏0