javascript知識點(diǎn)收藏
2019-11-21 02:15:59
供稿：網(wǎng)友
1.四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。
這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家對 clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。
但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
2.JS取clientHeight與scrollTop
先來段數(shù)據(jù)，下表的值為document.body.clientHeight / document.documentElement.clientHeight
IE FF
Html 608/0 630/11096
Xhtml 10942/591 11076/630
在html/xhtml與ie/ff這4種排列組合下，取得的clientHeight幾乎沒有一樣的，可見寫一段兼容3種瀏覽器兩種頁面標(biāo)準(zhǔn)的js腳本有多頭疼。
暫時總結(jié)的判斷方法如下：
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判斷當(dāng)前頁面的Doctype是否為Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最終結(jié)果比較一致
安全的取到scrollTop：
document.body.scrollTop + document.documentElement.scrollTop
判斷瀏覽器的類型，這種寫法挺喜歡的：
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;
3.js取到flash對象方法匯總
IE, FF, Maxthon用document.getElementById(id)
Opera用 document.embeds(id)
var isOpera=(window.opera&&navigator.userAgent.match(/opera/gi))?true:false;
if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}
4.js執(zhí)行順序
1.同級的不同的代碼塊，代碼塊間的執(zhí)行順序為從上到下；
2.在代碼中嵌入代碼的情況下，先執(zhí)行上層代碼塊，再執(zhí)行子代碼塊；代碼中嵌入代碼
是指一個文件引入另一個文件，而不是指所有的通過document.write形式打出的代碼。
