JavaScript Window(BOM 對象)

瀏覽器對象模型 (BOM)

http://www.w3school.com.cn/js/js_window.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/Window

瀏覽器對象模型（Browser Object Model）尚無正式標準。因爲現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，所以常被認爲是 BOM 的方法和屬性。

所謂的瀏覽器對象模型，指的是把整個瀏覽器看作一個對象。  （該對象就是window）,經過修改window對象的屬性來修改瀏覽器的設置，經過調用window對象的方法，來控制瀏覽器的行爲,即面向window編程，但實際上操做的是瀏覽器（ 這是面向對象編程思想最標準的體現 ）

window對象是什麼？

是javascript編程語言的最核心對象，有了它才能跟瀏覽器進行交互。也叫全局對象，即全部定義在全局範圍的變量和函數，都屬於window對象的一部分。全局變量（即定義變量時前 不加var），其實是window的屬性

window對象的結構

 

window對象的原理

var global = {

     Math : function(){...},

     Date : function(){...},

     doucment : {...},

     alert : function(){...},

     console : {...},

     window : this

}

window.location 只讀屬性，返回一個  Location  對象，其中包含有關文檔當前位置的信息。

雖然其是個只讀屬性，但仍然能夠賦給它一個  DOMString

window.location = 'http://www.example.com'
// 同下
window.location.href = 'http://www.example.com'

API:

reload(Boolean) // 刷新當前頁面，能夠傳遞參數，true表示強制從服務器從新加載當前頁面，默認爲false，即便用緩存
replace('http://www.cnblogs.com/fanlinqiang')// 修改地址並保持hash值
href // 當前頁地址
hostname  //返回 web 主機的域名
pathname //返回當前頁面的路徑和文件名
port //返回 web 主機的端口 （80 或 443）
search //向服務器發送字符串數據
hash // #.., 地址中的hash值，在單頁面應用中常常用到

navigator對象 （如下屬性不兼容）

appName  //瀏覽器名稱
appVersion  //瀏覽器版本
platform //操做系統
// 最新的瀏覽器已經全面放棄以上這些屬性
userAgent  //用戶代理信息，經過該屬性能夠獲取瀏覽器及操做系統信息

如何判斷移動端手機瀏覽器版本？

window.onload = function() {
　
　　var u = navigator.userAgent;

　　if(u.indexOf('Android') > 一1 ||  u.indexOf('Linux') > -1) { //安卓手機

　　　　alert("安卓手機")；

　　} else if(u.indexOf('iPhone') > 一1) { //蘋果手機

　　　　alert("蘋果手機")；

　　} else if(u.indexOf('Windows Phone') > 一1) { //winphone手機                          alert("winphone 手機")；

　　}

}

View Code

瀏覽器信息

// 瀏覽器信息
let browser = {
    versions: function () {
        let u = window.navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, //火狐內核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者安卓QQ瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否爲iPad
            webApp: u.indexOf('Safari') === -1, //是否爲web應用程序，沒有頭部與底部
            weixin: u.indexOf('MicroMessenger') === -1 //是否爲微信瀏覽器
        };
    }()
};

 

history對象

length // 當前域名下訪問頁面的個數
back()     //回退
forward()  //前進
go(-2)       //跳轉指定頁面
// 如下爲h5新增
 pushState(state, title, url) // 會觸發popstate事件
history.replaceState({page: 3}, "title 3", "?page=3")

須要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在作出瀏覽器動做時，纔會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）

實例：阻止瀏覽器後退按鈕？使瀏覽器後退按鈕失效

window.onload = function() {
    window.onpopstate = function() {
    　　window.history.pushState('forward', null, '#');
    　　window.history.forward(1);
    }
    window.history.pushState('forward', null, '#'); //在IE中必須得有這兩行
    window.history.forward(1);
}

View Code

常見方法

open(url) // 
close()
blur()
alert() //  阻塞式方法
confirm() //用戶交互、有boolean返回值；是一個阻塞式的方法，alert（）也是阻塞式方法
prompt() //接收用戶的反饋信息，返回值是字符串

 其中：let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

strUrl === 要在新打開的窗口中加載的URL。

strWindowName === 新窗口的名稱。

strWindowFeatures === 一個可選參數，列出新窗口的特徵(大小，位置，滾動條等)做爲一個DOMString。

eval()方法     動態的執行代碼,

一、將字符串解析爲可執行的JavaScript語句

二、能夠將字符串（符合對象格式的）轉化爲對象類型

//eval方法賦予了JS動態執行代碼的能力，讓它變成了一個名副其實 的靈活的語言（使用風險較大，已逐漸被淘汰）

function test() {
    var m = 'abc';
    eval('alert(m)');  //abc
}
// 將字符串轉爲對象時須要添加一層 {}
var a = '{name:123,age:456}'
console.log( eval("{a}") )

  setInterval 與 setTimeout 

JavaScript是單線程的語言，但使用setTimout（延時器） 和 setInterval（定時器）能夠模擬多線程

setInterval(function(){
　　console.log(111)
},1000)
setTimeout(function(){
　　console.log(222)
},1000)

在JavaScript代碼執行期間，遇到setTimeout 和 setInterval 會將其依次放置到執行棧中，當其餘代碼執行完後纔開始執行執行棧中的「任務」，所以當碰到

... ...
setTimeout(function(){}, 0)
... ... 

至關於將其中的任務放置到JavaScript代碼最後執行，(1)若是回調的執行時間大於間隔間隔，那麼瀏覽器會繼續執行它們，致使真正的間隔時間 比原來的大一點；(2)它們存在一個最小的時鐘間隔，在 IE6~IE8 中爲 15.6ms6，後來精準到 10ms，IE10 爲 4ms，其餘瀏覽器相仿。但這些太容易受外部因素影響，好比電池快沒電 了，同時打開的應用程序太多了，致使 CPU 忙碌，這些都會讓它的數值偏高。

此外還有使用setInterval時其中的「任務」也是一個費時的過程則表現出的現象並非咱們想要的，如：假設咱們想要一個任務每隔10s運行一次，而這個任務每次運行可能須要9秒，這樣表現出來的可能就是每一秒就運行了這個任務；更有甚者，假設咱們想要一個任務每隔10s運行一次，而這個任務每次運行的過程可能要11秒或者20s...,，這時候setInterval就會在執行棧進行累積，隨後連續觸發，爲此咱們能夠使用setTimeout來實現咱們想要的結果：

使用setTimeout代替setInterval？？

!function(){
    console.log("這是一個須要9秒的任務")
    setTimeout(arguments.callee,10000)
}()

 面試題：

for(var i=0;i<3;i++){
    setTimeout(function(){
        console.log(i--) // 3 2 1
    },0)
} 

舊版本 IE 的最短時鐘間隔太長，可利用 image 死鏈時當即執行 onerror 回調的狀況來實現setTimeout

var orig_setTimeout = window.setTimeout;
window.setTimeout = function(fun, wait) {
    if (wait < 15) {
        orig_setTimeout(fun, wait);
    } else {
        var img = new Image();
        img.onload = img.onerror = function() {
            fun();
        };
        img.src = "data:,foo";
    }
}; 

JS是單線程仍是多線程？

瀏覽器都是單線程的, 全部的代碼執行都是同步

 

當有多個定時器出現時， 會交叉生成任務，存入瀏覽器的任務執行隊列當中

setInterval(function(){console.log(1111);},0);
console.log(2222);
 
輸出順序：
　　 2222
 　 1111

 JavaScript引擎的主線程負責執行代碼，因爲只有一個線程，執行固然是同步的，即按順序來。JavaScript中的異步一般都是經過回調函數來實現的，回調函數就是將函數的執行權轉讓給別人。另外，還有一個叫任務隊列的東西，全部的異步代碼都是從隊列當中來。

因此在實際上咱們會發現，JavaScript根本不能同時執行兩個任務，本質上仍是單線程。在JavaScript中所謂的異步有三種：

1. 鼠標鍵盤事件觸發，例如：onclick，onkeydown等等
2. 網絡事件觸發，例如：onload，onerror
3. 定時器，例如：setTimeout，setInterval