JavaScript-BOM

Posted 2020-10-16 万里奔腾

一、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();
　　　　　　}
　　　　}

　　　　

　　　　

　　2、confirm() 

　　　　方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

　　　　window.onload=function()
　　　　{
　　　　　　var str=confirm(‘您是否要删除‘);
　　　　　　if(str==false){
　　　　　　　　alert(‘好的‘);
　　　　　　}else{
　　　　　　　　alert(‘再见‘);
　　　　　　}
　　　　}

　　

　　3、window.location

　　　　跳转到页面

　　　　<input type="button" value="aaa" onclick="window.location=‘http://www.zhinengshe.com/‘;" />

 

　　4、window.open

　　　　打开新页面

　　　　<input type="button" value="open" onclick="window.open(‘close.html‘);" />

　　

　　5、prompt()

　　　　方法用于显示可提示用户进行输入的对话框。

　　　　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);
　　　　　　　　};
　　　　　　};