成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js bom window對(duì)象

Hydrogen / 2811人閱讀

摘要：一全局作用域我們?nèi)肿饔糜蚨x了一個(gè)變量，對(duì)象下也能訪問(wèn)，證明在全局作用域下定義的變量，會(huì)自動(dòng)納入對(duì)象。另外，這兩個(gè)方法都不適用于框架，只能對(duì)最外層的對(duì)象使用。

一、全局作用域

我們?nèi)肿饔糜蚨x了一個(gè)變量name，window對(duì)象下也能訪問(wèn)，證明在全局作用域下定義的變量，會(huì)自動(dòng)納入window對(duì)象。

var name = "Bob";

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

未聲明的變量不能使用，并且會(huì)拋出未定義錯(cuò)誤提示，但window下尋找未定義的變量，會(huì)拋出undefined，因?yàn)閣indow對(duì)象查詢是對(duì)象的一次查詢屬性。

console.log(age); // ReferenceError: age is not defined
console.log(window.age); // undefined
二、窗口位置

IE,Safari,Opera, Chome 都提供了screenLeft和screenTop屬性，分別表示對(duì)窗口相對(duì)于屏幕的左邊和上邊的位置。

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

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

console.log(leftPos, topPos);

這個(gè)例子運(yùn)用二元操作符首先確定screenLeft和screenTop屬性是否存在，如果是（在IE、Safari、Opera和Chrome中），則取得這兩個(gè)屬性的值。如果不存在（在Firefox中），則取得screenX和screenY的值。

三、窗口移動(dòng)

需要注意的是，這兩個(gè)方法可能會(huì)被瀏覽器禁用；而且，在Opera和IE 7（及更高版本）中默認(rèn)就是禁用的。另外，這兩個(gè)方法都不適用于框架，只能對(duì)最外層的window對(duì)象使用。

moveTo()和moveBy()方法倒是有可能將窗口精確地移動(dòng)到一個(gè)新位置。這兩個(gè)方法都接收兩個(gè)參數(shù)，其中moveTo()接收的是新位置的x和 y坐標(biāo)值，而moveBy()接收的是在水平和垂直方向上移動(dòng)的像素?cái)?shù)

//將窗口移動(dòng)到屏幕左上角
window.moveTo(0,0);

//將窗向下移動(dòng)100像素
window.moveBy(0,100);

//將窗口移動(dòng)到(200,300)
window.moveTo(200,300);

//將窗口向左移動(dòng)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中保存的是不是一個(gè)數(shù)值；如果不是，則通過(guò)檢查document.compatMode（這個(gè)屬性將在第10章全面討論）來(lái)確定頁(yè)面是否處于標(biāo)準(zhǔn)模式。如果是，則分別使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否則，就使用document.body.clientWidth和document.body.clientHeight的值。

// 調(diào)整瀏覽器窗口的大小
// resizeTo()接收瀏覽器窗口的新寬度和新高度，而resizeBy()接收新窗口與原窗口的寬度和高度之差

//調(diào)整到100×100
window.resizeTo(100, 100);

//調(diào)整到200×150
window.resizeBy(100, 50);

//調(diào)整到 300×300
window.resizeTo(300, 300);
五、導(dǎo)航和打開窗口

使用window.open()方法既可以導(dǎo)航到一個(gè)特定的URL，也可以打開一個(gè)新的瀏覽器窗口

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

// 等于
< a  target="_blank">
// 打開窗口再關(guān)閉
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)對(duì)話框

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95510.html

相關(guān)文章

  • 簡(jiǎn)簡(jiǎn)單單認(rèn)識(shí)js里的Bom對(duì)象

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

    CoffeX 評(píng)論0 收藏0

  • bom基礎(chǔ)

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

    shusen 評(píng)論0 收藏0

  • JS系列之BOM

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

    edagarli 評(píng)論0 收藏0

  • js bom location對(duì)象

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

    Carson 評(píng)論0 收藏0

  • js中的bom對(duì)象

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

    dailybird 評(píng)論0 收藏0

  • Javascript學(xué)習(xí)總結(jié) - JS基礎(chǔ)系列三

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

    zlyBear 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<