淺談JavaScript 瀏覽器對象
window
window對象不但充當全局作用域，而且表示瀏覽器窗口。
window對象有innerWidth和innerHeight屬性，可以獲取瀏覽器窗口的內(nèi)部寬度和高度。內(nèi)部寬高是指除去菜單欄、工具欄、邊框等占位元素后，用于顯示網(wǎng)頁的凈寬高。還有一個outerWidth和outerHeight屬性，可以獲取瀏覽器窗口的整個寬高。
補充：
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth 網(wǎng)頁可見區(qū)域高：document.body.clientHeight 網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線和滾動條的寬) 網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬) 網(wǎng)頁正文全文寬：document.body.scrollWidth 網(wǎng)頁正文全文高：document.body.scrollHeight 網(wǎng)頁被卷去的高：document.body.scrollTop 或者 jQuery(document).scrollTop() 網(wǎng)頁被卷去的左：document.body.scrollLeft 網(wǎng)頁正文部分上：window.screenTop 網(wǎng)頁正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的寬：window.screen.width 屏幕可用工作區(qū)高度：window.screen.availHeight 屏幕可用工作區(qū)寬度：window.screen.availWidth 屏幕彩色位數(shù): window.screen.colorDepth 屏幕像素/英寸比例: window.screen.deviceXDPI 瀏覽器窗口的高度: $(window).height() 瀏覽器窗口的寬度: $(window).width()
特殊1:
document.body.scrollTop總為0的解決方法
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
alert(scrollPos );
特殊2:
網(wǎng)頁正文全文寬："+ document.body.scrollWidth;
網(wǎng)頁正文全文高："+ document.body.scrollHeight;
以上函數(shù)有時獲取不了，就用以下方法。
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY)
{
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { //Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
navigator
navigator對象表示瀏覽器的信息，最常用的屬性包括：
•navigator.appName：瀏覽器名稱；
•navigator.appVersion：瀏覽器版本；
•navigator.language：瀏覽器設置的語言；
•navigator.platform：操作系統(tǒng)類型；
•navigator.userAgent：瀏覽器設定的User-Agent字符串。
初學者為了針對不同瀏覽器編寫不同的代碼，喜歡用if判斷瀏覽器版本，例如：
var width;
if (getIEVersion(navigator.userAgent) < 9) {
width = document.body.clientWidth;
} else {
width = window.innerWidth;
}
但這樣既可能判斷不準確，也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回undefined的特性，直接用短路運算符||計算：
var width = window.innerWidth || document.body.clientWidth;
screen
screen對象表示屏幕的信息，常用的屬性有：
•screen.width：屏幕寬度，以像素為單位；
•screen.height：屏幕高度，以像素為單位；
•screen.colorDepth：返回顏色位數(shù)，如8、16、24。
location
location對象表示當前頁面的URL信息。例如，一個完整的URL：
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href獲取。要獲得URL各個部分的值，可以這么寫：
location.protocol; // 'http' location.host; // 'www.example.com' location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP'
要加載一個新頁面，可以調(diào)用location.assign()。如果要重新加載當前頁面，調(diào)用location.reload()方法非常方便。
document
document對象表示當前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結(jié)構(gòu)，document對象就是整個DOM樹的根節(jié)點。
document的title屬性是從HTML文檔中的<title>xxx</title>讀取的，但是可以動態(tài)改變：
document對象還有一個cookie屬性，可以獲取當前頁面的Cookie。
Cookie是由服務器發(fā)送的key-value標示符。因為HTTP協(xié)議是無狀態(tài)的，但是服務器要區(qū)分到底是哪個用戶發(fā)過來的請求，就可以用Cookie來區(qū)分。當一個用戶成功登錄后，服務器發(fā)送一個Cookie給瀏覽器，例如user=ABC123XYZ(加密的字符串)...，此后，瀏覽器訪問該網(wǎng)站時，會在請求頭附上這個Cookie，服務器根據(jù)Cookie即可區(qū)分出用戶。
Cookie還可以存儲網(wǎng)站的一些設置，例如，頁面顯示的語言等等。
JavaScript可以通過document.cookie讀取到當前頁面的Cookie：
document.cookie; // 'v=123; remember=true; prefer=zh'
由于JavaScript能讀取到頁面的Cookie，而用戶的登錄信息通常也存在Cookie中，這就造成了巨大的安全隱患，這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的：
<!-- 當前頁面在wwwexample.com -->
<html>
<head>
<script src="http://www.foo.com/jquery.js"></script>
</head>
</html>
如果引入的第三方的JavaScript中存在惡意代碼，則www.foo.com網(wǎng)站將直接獲取到www.example.com網(wǎng)站的用戶登錄信息。
為了解決這個問題，服務器在設置Cookie時可以使用httpOnly，設定了httpOnly的Cookie將不能被JavaScript讀取。這個行為由瀏覽器實現(xiàn)，主流瀏覽器均支持httpOnly選項，為了確保安全，服務器端在設置Cookie時，應該始終堅持使用httpOnly。
document.write() 僅僅向文檔輸出新內(nèi)容
如果在文檔已完成加載后執(zhí)行 document.write，整個 HTML 頁面將被覆蓋：
參考:http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
DOM | Document
// 返回ID為'test'的節(jié)點：
var test = document.getElementById('test');
// 獲取節(jié)點test下的所有直屬子節(jié)點:
var cs = test.children;
var first = test.firstElementChild;
第二種方法是使用querySelector()和querySelectorAll()，需要了解selector語法，然后使用條件來獲取節(jié)點，更加方便：
// 通過querySelector獲取ID為q1的節(jié)點：
var q1 = document.querySelector('#q1');
// 通過querySelectorAll獲取q1節(jié)點內(nèi)的符合條件的所有節(jié)點：
var ps = q1.querySelectorAll('div.highlighted > p');
嚴格地講，我們這里的DOM節(jié)點是指Element，但是DOM節(jié)點實際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多種，以及根節(jié)點Document類型，但是，絕大多數(shù)時候我們只關心Element，也就是實際控制頁面結(jié)構(gòu)的Node，其他類型的Node忽略即可。根節(jié)點Document已經(jīng)自動綁定為全局變量document。
修改Dom
修改CSS也是經(jīng)常需要的操作。DOM節(jié)點的style屬性對應所有的CSS，可以直接獲取或設置。因為CSS允許font-size這樣的名稱，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：
// 獲取<p id="p-id">...</p>var p = document.getElementById('p-id');
// 設置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
插入DOM
有兩個辦法可以插入新的節(jié)點。一個是使用appendChild，把一個子節(jié)點添加到父節(jié)點的最后一個子節(jié)點。例如：
<!-- HTML結(jié)構(gòu) --> <p id="js">JavaScript</p> <div id="list"> <p id="scheme">Scheme</p> </div>
把<p id="js">JavaScript</p>添加到<div id="list">的最后一項：
var js = document.getElementById('js'), list = document.getElementById('list');
list.appendChild(js);
現(xiàn)在，HTML結(jié)構(gòu)變成了這樣：
<!-- HTML結(jié)構(gòu) --><div id="list"> <p id="scheme">Scheme</p> <p id="js">JavaScript</p></div>
因為我們插入的js節(jié)點已經(jīng)存在于當前的文檔樹，因此這個節(jié)點首先會從原先的位置刪除，再插入到新的位置。
更多的時候我們會從零創(chuàng)建一個新的節(jié)點，然后插入到指定位置：
haskell = document.createElement('p');
動態(tài)創(chuàng)建一個節(jié)點然后添加到DOM樹中，可以實現(xiàn)很多功能。舉個例子，下面的代碼動態(tài)創(chuàng)建了一個<style>節(jié)點，然后把它添加到<head>節(jié)點的末尾，這樣就動態(tài)地給文檔添加了新的CSS定義：
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
insertBefore
如果我們要把子節(jié)點插入到指定的位置怎么辦？可以使用parentElement.insertBefore(newElement, referenceElement);，子節(jié)點會插入到referenceElement之前。
很多時候，需要循環(huán)一個父節(jié)點的所有子節(jié)點，可以通過迭代children屬性實現(xiàn)：
var
i, c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i個子節(jié)點
}
刪除DOM
要刪除一個節(jié)點，首先要獲得該節(jié)點本身以及它的父節(jié)點，然后，調(diào)用父節(jié)點的removeChild把自己刪掉：
// 拿到待刪除節(jié)點:
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點:
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
removed === self; // true
注意到刪除后的節(jié)點雖然不在文檔樹中了，但其實它還在內(nèi)存中，可以隨時再次被添加到別的位置。
當你遍歷一個父節(jié)點的子節(jié)點并進行刪除操作時，要注意，children屬性是一個只讀屬性，并且它在子節(jié)點變化時會實時更新。因此，刪除多個節(jié)點時，要注意children屬性時刻都在變化。
操作表單
用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。
不過表單的輸入框、下拉框等可以接收用戶輸入，所以用JavaScript來操作表單，可以獲得用戶輸入的內(nèi)容，或者對一個輸入框設置新的內(nèi)容。
HTML表單的輸入控件主要有以下幾種：
•文本框，對應的<input type="text">，用于輸入文本；
•口令框，對應的<input type="password">，用于輸入口令；
•單選框，對應的<input type="radio">，用于選擇一項；
•復選框，對應的<input type="checkbox">，用于選擇多項；
•下拉框，對應的<select>，用于選擇一項；
•隱藏文本，對應的<input type="hidden">，用戶不可見，但表單提交時會把隱藏文本發(fā)送到服務器。
獲取值
如果我們獲得了一個<input>節(jié)點的引用，就可以直接調(diào)用value獲得對應的用戶輸入值：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'
這種方式可以應用于text、password、hidden以及select。但是，對于單選框和復選框，value屬性返回的永遠是HTML預設的值，而我們需要獲得的實際是用戶是否“勾上了”選項，所以應該用checked判斷：
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
設置值
設置值和獲取值類似，對于text、password、hidden以及select，直接設置value就可以：
// <input type="text" id="email">var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內(nèi)容已更新
對于單選框和復選框，設置checked為true或false即可。
HTML5控件
HTML5新增了大量標準控件，常用的包括date、datetime、datetime-local、color等，它們都使用<input>標簽：
<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
不支持HTML5的瀏覽器無法識別新的控件，會把它們當做type="text"來顯示。支持HTML5的瀏覽器將獲得格式化的字符串。例如，type="date"類型的input的value將保證是一個有效的YYYY-MM-DD格式的日期，或者空字符串。
提交表單
最后，JavaScript可以以兩種方式來處理表單的提交（AJAX方式在后面章節(jié)介紹）。
方式一是通過<form>元素的submit()方法提交一個表單，例如，響應一個<button>的click事件，在JavaScript代碼中提交表單：
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button></form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form'); // 可以在此修改form的input...
// 提交form:
form.submit();
}</script>
這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器默認點擊<button type="submit">時提交表單，或者用戶在最后一個輸入框按回車鍵。因此，第二種方式是響應<form>本身的onsubmit事件，在提交form時作修改：
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button></form>
<script>
function checkForm() {
var form = document.getElementById('test-form'); // 可以在此修改form的input...
// 繼續(xù)下一步:
return true;
}
</script>
注意要return true來告訴瀏覽器繼續(xù)提交，如果return false，瀏覽器將不會繼續(xù)提交form，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交form。
在檢查和修改<input>時，要充分利用<input type="hidden">來傳遞數(shù)據(jù)。
例如，很多登錄表單希望用戶輸入用戶名和口令，但是，安全考慮，提交表單時不傳輸明文口令，而是口令的MD5。普通JavaScript開發(fā)人員會直接修改<input>：
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<button type="submit">Submit</button></form>
<script>
function checkForm() {
var pwd = document.getElementById('password'); // 把用戶輸入的明文變?yōu)镸D5:
pwd.value = toMD5(pwd.value); // 繼續(xù)下一步:
return true;
}</script>
這個做法看上去沒啥問題，但用戶輸入了口令提交時，口令框的顯示會突然從幾個*變成32個*（因為MD5有32個字符）。
要想不改變用戶的輸入，可以利用<input type="hidden">實現(xiàn)：
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button></form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password'); // 把用戶輸入的明文變?yōu)镸D5:
md5_pwd.value = toMD5(input_pwd.value); // 繼續(xù)下一步:
return true;
}</script>
注意到id為md5-password的<input>標記了name="password"，而用戶輸入的id為input-password的<input>沒有name屬性。沒有name屬性的<input>的數(shù)據(jù)不會被提交。
操作文件
在HTML表單中，可以上傳文件的唯一控件就是<input type="file">。
注意：當一個表單包含<input type="file">時，表單的enctype必須指定為multipart/form-data，method必須指定為post，瀏覽器才能正確編碼并以multipart/form-data格式發(fā)送表單的數(shù)據(jù)。
出于安全考慮，瀏覽器只允許用戶點擊<input type="file">來選擇本地文件，用JavaScript對<input type="file">的value賦值是沒有任何效果的。當用戶選擇了上傳某個文件后，JavaScript也無法獲得該文件的真實路徑：
待上傳文件:
通常，上傳的文件都由后臺服務器處理，JavaScript可以在提交表單時對文件擴展名做檢查，以便防止用戶上傳無效格式的文件：
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.');
return false;
}
File API
由于JavaScript對用戶上傳的文件操作非常有限，尤其是無法讀取文件內(nèi)容，使得很多需要操作文件的網(wǎng)頁不得不用Flash這樣的第三方插件來實現(xiàn)。
隨著HTML5的普及，新增的File API允許JavaScript讀取文件內(nèi)容，獲得更多的文件信息。
HTML5的File API提供了File和FileReader兩個主要對象，可以獲得文件信息并讀取文件。
下面的例子演示了如何讀取用戶選取的圖片文件，并在一個<div>中預覽圖像：
圖片預覽：
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 監(jiān)聽change事件:
fileInput.addEventListener('change', function () {
// 清除背景圖片:
preview.style.backgroundImage = ''; // 檢查文件是否選擇:
if (!fileInput.value) {
info.innerHTML = '沒有選擇文件';
return;
} // 獲取File引用:
var file = fileInput.files[0]; // 獲取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的圖片文件!');
return;
} // 讀取文件:
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式讀取文件:
reader.readAsDataURL(file);
});
上面的代碼演示了如何通過HTML5的File API讀取文件內(nèi)容。以DataURL的形式讀取到的文件是一個字符串，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...，常用于設置圖像。如果需要服務器端處理，把字符串base64后的字符發(fā)送給服務器并用Base64解碼就可以得到原始文件的二進制內(nèi)容。
回調(diào)
上面的代碼還演示了JavaScript的一個重要的特性就是單線程執(zhí)行模式。在JavaScript中，瀏覽器的JavaScript執(zhí)行引擎在執(zhí)行JavaScript代碼時，總是以單線程模式執(zhí)行，也就是說，任何時候，JavaScript代碼都不可能同時有多于1個線程在執(zhí)行。
你可能會問，單線程模式執(zhí)行的JavaScript，如何處理多任務？
在JavaScript中，執(zhí)行多任務實際上都是異步調(diào)用，比如上面的代碼：
reader.readAsDataURL(file);
就會發(fā)起一個異步操作來讀取文件內(nèi)容。因為是異步操作，所以我們在JavaScript代碼中就不知道什么時候操作結(jié)束，因此需要先設置一個回調(diào)函數(shù)：
reader.onload = function(e) {
// 當文件讀取完成后，自動調(diào)用此函數(shù):
};
當文件讀取完成后，JavaScript引擎將自動調(diào)用我們設置的回調(diào)函數(shù)。執(zhí)行回調(diào)函數(shù)時，文件已經(jīng)讀取完畢，所以我們可以在回調(diào)函數(shù)內(nèi)部安全地獲得文件內(nèi)容。
以上這篇淺談JavaScript 瀏覽器對象就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
javascript日期字符串轉(zhuǎn)換為時間戳的5種方法總結(jié)
在JavaScript中將日期字符串轉(zhuǎn)換為時間戳是一個常見需求,本文介紹了五種實現(xiàn)此轉(zhuǎn)換的方法,包括使用Date對象、正則表達式輔助解析、Date.parse()函數(shù)以及第三方庫如moment.js和date-fns,這些方法適用于不同格式的日期字符串,需要的朋友可以參考下2024-09-09
本篇文章主要介紹了Webpack DLL 用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單日歷特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
smartupload實現(xiàn)文件上傳時獲取表單數(shù)據(jù)(推薦)
這篇文章主要介紹了smartupload實現(xiàn)文件上傳時獲取表單數(shù)據(jù)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了JS面向?qū)ο笾噙x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換
本文主要介紹了微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
uni-app跨端自定義指令實現(xiàn)按鈕權(quán)限操作
實現(xiàn)uni-app自定義指令按鈕權(quán)限需要涉及到對于vue.config.js新增loader配置，基礎正則知識，webpack的loader開發(fā)和調(diào)試，以及npm本地調(diào)試和發(fā)布，接下來就從了解這些前置知識開始，需要的朋友可以參考下2023-01-01
使用Javascript監(jiān)控前端相關數(shù)據(jù)的代碼
本篇文章詳細的介紹了使用Javascript監(jiān)控前端相關數(shù)據(jù)，可以及時的監(jiān)控前端的錯誤，加載時間等，有需要的可以了解一下。2016-10-10
JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法
這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法,文章通過代碼示例給大家講解的非常詳細,?對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-06-06
underscore之Chaining_動力節(jié)點Java學院整理
本文通過文字說明與代碼的形式給大家介紹了underscore之Chaining的相關知識，感興趣的朋友一起學習吧2017-07-07