1 origin
window.origin使用傳回的是目前網頁的網址。打開百度首頁,并在控制台中輸入
window.origin
控制台中會輸出"https://www.baidu.com",并不包含查詢字元串,比如浏覽器位址欄輸入https://www.baidu.com/?nDos=great。打開百度首頁之後,使用window.origin也不會輸出其中的?nDos=great。
2 name
【設定】或【傳回】存放視窗的名稱。
2.1 如何指定
在 window.open() 方法建立視窗時指定。window.open( pageURL, name, parameters ),其中的 name 參數即是。
使用一個 <frame> 标記的 name 屬性指定。<frame name="nDos"></frame>。
2.2 用處
視窗的名稱可以用作一個 <a> 或者 <form> 标記的 target 屬性的值。以這種方式使用 target 屬性聲明了超連結文檔或表單送出結果應該顯示于指定的視窗或架構中。
比如:<a href="......." target="nDos"></a>
對于内聯iframe,如一個頁面裡面有很多iframe,就可以用:window.name(目前window的名稱)、window.parent.name(父window的名稱)、widnow.top.name(頂層window的名稱)。
2.3 跨域
window.name 屬性有一個特征:即在一個視窗的生命周期内,視窗載入的所有的頁面都是共享相同 window.name,每一個頁面對 window.name 都有讀寫的權限,window.name 持久的存在于一個視窗載入的所有頁面中,不會因為新的頁面的載入而被重置。
利用這點可以實作跨域傳遞資料
請看下面兩個html檔案組成的例子:
a.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<script>
window.name = '這是a.html設定的window.name值';
/*2秒後在本頁面打開b.html*/
setTimeout(function(){
window.location = 'b.html';
}, 2000);
</script>
</body>
</html>
b.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b.html</title>
</head>
<body>
<script>
document.write(window.name);
</script>
</body>
</html>
在浏覽器中打開 a.html,2 秒之後會跳轉到 b.html,并在頁面中寫入“這是 a.html 設定的 window.name 值”。
可以看到 b.html 頁面上成功輸出 a.html 頁面中設定的 window.name 值,如果在之後所有載入的頁面都沒對 window.name 進行修改,那麼所有的這些頁面擷取到的 window.name值都是 a.html 頁面中設定的值;
不過要注意的是:window.name 的值隻能是字元串的形式,這個字元串的大小最大隻能允許2M左右,具體取決于不同的浏覽器。
上面的例子中,我們用到的頁面 a.html 和 b.html 是處于同一個域的,但是即使 a.html 與 b.html 處于不同的域中,上述結論同樣是适用的,這也正是利用 window.name 進行跨域的原理;
比如上面的例子,我們把 window.location = 'b.html' 中的跳轉頁面改為
www.baidu.com,然後打開控制台輸出 window.name 看看是什麼資料。
當然這種跳轉的方式來跨域顯然不能實際應用,比如我們的頁面是 http://localhost/a.html,而想要擷取的資料在目标頁面 http://www.cnblogs.com/ndos/data.html 中。這個時候我們需要一個中間角色iframe,通過它來獲得data.html中的資料。具體方法如下。
以下為修改後的 a.html 檔案代碼:
<body>
<iframe id="proxy"
src="http://www.cnblogs.com/data.html" style="display: none;"
onload = "getData()"
>
<script>
function getData(){
var iframe = document.getElementById('proxy);
iframe.onload = function(){
var data = iframe.contentWindow.name;
//上述即為擷取iframe裡的window.name也就是data.html頁面中所設定的資料;
};
iframe.src = 'b.html';
}
</script>
</body>
上述代碼首先設定了一個 iframe 标簽,将 src 設定為跨域網頁的位址,加載成功後将執行綁定在 onload 事件上的代碼,也就是 getData()。該函數中在iframe上重置了onload事件綁定的函數,其中代碼可以擷取 iframe 中 window 對象的 name 屬性值,最後最關鍵的一步是将 iframe 的 src 屬性值設定為 b.html,也就是與 a.html 同源的頁面位址。
如果沒有這最後最關鍵的一步,那麼将擷取不到 iframe.contentWindow.name 的值。這受到浏覽器的同源政策所限制,但是最後一步使得 iframe 中的頁面與 a.html 是同源的,同時 iframe 中的頁面跳轉也沒有改變 window.name 的值,最終我們獲得的還是 http://www.cnblogs.com/data.html 中的值。
3 status
相關聯的還有 defaultStatus 和 defaultstatus 屬性,個人還不知道這幾個屬性有什麼用,在試驗中也發現不起作用。比如谷歌不顯示狀态欄(僅在滑鼠移動到 a 标簽上才顯示);IE中也不起作用,應該是IE設定的原因,具體沒有深入配置。
有興趣的讀者可自行調試。
4 length
length 屬性傳回在目前視窗中frames的數量(包括IFRAMES)。
該屬性值與window.frames.length屬性值相等。
5 innerWidth/Height
視窗中文檔顯示區域的寬度,該屬性可讀可寫,以像素計。
這裡的寬度和高度不包括菜單欄、工具欄以及滾動條等的高度。
IE8之前不支援這些屬性。它用 document.documentElement 或 document.body (與 IE 的版本相關)的 clientWidth 和 clientHeight 屬性作為替代。
6 outerWidth/Height
表示視窗的寬度包括兩邊的border及滾動條的值, outerHeight 表示視窗的高度包括菜單,位址欄,工具欄等,屬性可讀性。
IE8之前的浏覽器不支援,且沒有提供替代的屬性。
7 滾動值
scrollY:firefox、chrome,opera支援,IE不支援,忽略Doctype規則。
pageYOffset:IE9+ 、firefox、chrome,opera均支援該方式擷取頁面滾動高度值,并且會忽略Doctype定義規則。
延伸記憶:
document.documentElement.scrollTop:如果頁面定義了doctype文檔頭,基本所有的浏覽器都支援。除safari貌似不支援,定義html5 doctype,支援body.scrollTop卻不支援documentElement.scrollTop。
document.body.scrollTop:如果沒定義doctype,所有浏覽器都支援,(定義了doctype,chrome 也支援)
8 screenX/Y
表示視窗相對于螢幕左上角的位置。注意IE不支援此屬性。隻讀屬性。
screenTop/screenLeft屬性值相同。
9 devicePixelRatio
window.devicePixelRatio是裝置上實體像素和裝置獨立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 實體像素 / dips。比如電腦時值為1,iPhoneX值為3。
dip或dp,(device independent pixels,裝置獨立像素)與螢幕密度有關。dip可以用來輔助區分視網膜裝置還是非視網膜裝置。
浏覽器一般都會有放大縮小的控件,當你選擇不同的縮放比例時,window.devicePixelRatio都會相應的改變。比如将頁面放大2倍,那麼window.devicePixelRatio=2。
這個值大多用在移動裝置上,正常人眼可以識别的分辨率為300PPI,而現在很多裝置的分辨率都超過了300PPI。如果裝置總是以滿分辨率來顯示東西就可能造成文字太小,人們看不清。是以像浏覽器這樣的軟體就會對内容做一次放大後再進行渲染,也就是降低分辨率。要降低分辨率就需要讓像素這個機關變大,是以PPI的計算不再使用實體像素,而改用裝置獨立像素。那麼裝置獨立像素和實體像素之間就存在一個比例差異,這就是裝置像素比。
10 TEMPORARY
該屬性通常與PERSISTENT一起使用。由于此時僅GoogleChrome 浏覽器可以實施此FileSystemAPI,目前尚不存在專門用于檔案/配額管理的浏覽器使用者界面,故在此不再深入研究。