BOM基础应用

2019-08-02 17:40:14 阅读：174 来源： 互联网

标签：function 基础滚动条 window BOM 应用 scrollTop document open

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>

标签：function,基础,滚动条,window,BOM,应用,scrollTop,document,open
来源： https://blog.csdn.net/weixin_43947715/article/details/98210488

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BOM基础应用