BOM基础应用
关于打开和关闭窗口
- open() 事例1
- close() 事例2
1.首先说说open()。open()存在两个参数第一个参数就说所输入的URL，
第二个参数就是新页面打开的位置：_self、_blank_parent等…和HTML超链接
a的target属性有一些类似的地方。
2.实际上open()也存在返回值，例如，当我们在窗口以textarea标签里面输入文字，实际上可以通过document.write的方式将返回值传入第二个窗口about:blank（表示空白页面）。
3.close()，关闭一个窗口(存在一些小问题，在火狐下无法直接关闭页面，需要先open()一个火狐页面通过_blank（其他参数没用）跳转第二页面在进行关闭操作)。就是如果用火狐就必须先打开再关闭
事例1
<script type="text/javascript">
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
//open()存在两个参数
var newWin= window.open('about:blank','_blank')
//newWin为返回值
newWin.document.write(oTxt1.value)
}
</script>
<input id="btn1" type="button" value="打开"/>
<textarea id="txt1">
</textarea>
事例2
//将事例1用火狐打开，e而后跳转到close页面，才可以关闭
<input id="btn1" type="button" value="关闭" onclick="window.open(close.html);"/>
BOM常用属性
- window.navigtor.userAgent
- window.location
1.先说说window.navigtor.userAgent。它的作用就是：可以判断浏览器
版本和类型，以及包含了许多当前浏览器的信息（用手机，ipad，pc端等信息）,
其中userAgent是指定浏览器版本
2.window.location：location就是位置、地址的意思。它的最用就是可以获取当前页面的URL地址。其次也可以进行赋值，window.location=‘URL’(指定的URL)这个作用相当于open()的第一个参数和第二参数_self。
<script type="text/javascript">
window.onload=function(){
alert(window.navigtor.userAgent);
}
</script>
<script type="text/javascript">
window.onload=function(){
//alert(window.location);
}
</script>
<input type="button" value="跳转" onclick="window.location='https://www.baidu.com/'"/ >;
js尺寸与坐标
- 可视区的大小：document.documentElement,clientWidth（宽）/clientWidth（高）;
- 滚动条：document.document.scrollTop
1.可视区的大小：可视区就是在页面中用所浏览的页面的可见的区域（随着窗体的宽高变化而变化。事例1
2.滚动条：scrollTop：滚动条的距离就是当前滚动条的位置与浏览器顶部的距离
事例1
<script type="text.javascript">
window.onload=function(){
var oBtn1=document.getElementById('btn1');
oBtn1.onclick=function(){
alert('宽：'+document.documentElement,clientWidth+'高：'+document.documentElement,clientHeight);
}
}
</script>
<input id="btn1" type="button" calue="可视区大小" />
事例2
<script type="text.javascript">
document.onclick=function(){
alert(document.document.scrollTop)
}
</script>
固定定位
这里说一个不会随着滚动条和可视区大小移动的div(（加了一个scroll事件：当滚动条滚动是发生的事件），便于观察加了一个body样式，在IE6或者一些低版本的浏览器中并不会识别fixed，以及可能会出现兼容性问题我们可以通过document.documentElement.scrollTop||document.body.scrollTop来解决
<style>
#div1{
position:fixed;
right:0;
bottom:0;
backgroundColor;
width:100px;
height:100px;
}
<style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
window.scroll=function(){
var scroll=document.documentElement.scrollTop||document.body.scrollTop
}
}
</script>
<body style="height:2000px">
<div id="div1">
</div>
</body>