JavaScript-BOM
一、BOM
瀏覽器對象
二、window和document
簡單來說,document是window的一個對象屬性。 Window 對象表示瀏覽器中打開的窗口。 如果文檔包含框架(frame 或 iframe 標簽),瀏覽器會為 HTML 文檔創建一個 window 對象,並為每個框架創建一個額外的 window 對象。 所有的全局函數和對象都屬於Window 對象的屬性和方法。 document 對 Document 對象的只讀引用
alert($(window).height());
//瀏覽器時下窗口可視區域高度
alert($(document).height());
//瀏覽器時下窗口文檔的高度
alert($(document.body).height());
//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerHeight(
true
));
//瀏覽器時下窗口文檔body的總高度 包括border padding margin
alert($(window).width());
//瀏覽器時下窗口可視區域寬度
alert($(document).width());
//瀏覽器時下窗口文檔對於象寬度
alert($(document.body).width());
//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerWidth(
true
));
//瀏覽器時下窗口文檔body的總寬度 包括border padding margin
alert($(document).scrollTop());
//獲取滾動條到頂部的垂直高度
alert($(document).scrollLeft());
//獲取滾動條到左邊的垂直寬度
1、window.close();
關閉窗口,關閉頁面
window.onload=function()
{
var btn1=document.getElementById(‘btn1‘);
btn1.onclick=function()
{
window.close();
}
}
window.onload=function()
{
var str=confirm(‘您是否要刪除‘);
if(str==false){
alert(‘好的‘);
}else{
alert(‘再見‘);
}
}
var res=prompt(‘輸入姓名‘,‘MWL‘);
alert(res);
6、scrollTop
滾動距離
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
console.log(typeof scrollTop); //number
alert(‘您已經滾動了‘+scrollTop+"px的距離");
7、window.navigator.userAgent
瀏覽器信息
alert(window.navigator.userAgent);
8、write()
顯示信息,但之前的信息會消失
window.onload=function()
{
var btn1=document.getElementById(‘btn1‘);
btn1.onclick=function()
{
document.write(‘asdasd‘);
}
}
9、document.documentElement.clientWidth
可視區
window.onload=function ()
{
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function ()
{
alert(document.documentElement.clientWidth+‘,‘+document.documentElement.clientHeight);
};
};
10、運行輸入框中的代碼
HTML:
<textarea id="txt1" rows="10" cols="40"></textarea><br>
<input id="btn1" type="button" value="運行" />
JS:
window.onload=function ()
{
var oTxt=document.getElementById(‘txt1‘);
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function ()
{
var oNewWin=window.open(‘about:blank‘,‘_blank‘)
oNewWin.document.write(oTxt.value);
};
};
JavaScript-BOM