BOM基础应用

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>
上一篇:点击导航滚动到指定锚点


下一篇:滚动条 scrollTop 平滑滑动