BOM

BOM:Browser  Object  Model(浏览器对象模型)

核心:window


window属性:(不常用)

1、window.self ===window      代表自己

2、window.parent         返回父窗口

3、window.top           返回顶层窗口,和parent一样

4、window.opener       返回窗口的开启者

window方法

    1、window.open(url,name);    //打开一个新窗口   

url:一个可选的字符串,声明了要在新窗口中显示的文档的url,如果省略了这个参数,或者他的值是空字符串,那么新窗口就不会显示任何文档

name:一个可选的字符串,这个字符串声明了新窗口的名称,所以再次点击按钮打开这个窗口的时候不会增加新窗口,因为这个名称的窗口已经存在,所以直接跳转到这个名称下面的窗口

扩展:还可以通过脚本的方式打开新窗口,但是谷歌默认会把系统自动打开的新网页阻止掉,但不阻止通过事件打开新的网页。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:;" id="open">通过脚本打开新页面</a>
	</body>
</html>
<script type="text/javascript">
	//通过脚本打开一个新窗口
	var oOpen = document.getElementById('open');
	oOpen.onclick = function(){
		window.open('opener.html','open');
	}
	
</script>
//注:请在外部建一个html文件,名称为opener.html
    2、window.close();    // 关闭浏览器

    3、window.alert(显示的文本);    //弹出窗

    4、window.confirm(对话框提示的文字);    //该方法的返回值,点击确定返回true,点击取消返回false

    5、window.prompt(提示信息);    //弹出输入框,该方法点击确认返回输入框的内容,点击取消返回null

history对象
该对象包括浏览器访问过的url

1、属性
     history.length       返回浏览器历史记录的数量,该属性每进入一个新的页面就累加一次,该属性的初始值为1,但是由于IE浏览器存在兼容性问题(初始值为2),该属性一般不被使用

2、方法

     history.go()      使用go方法可以在用户的历史记录中任意跳转,该方法接受一个参数,表示向前或者向后跳转的页面数的一个整数值,负数表示向后跳转,类似于后退按钮;正数表示向前跳转,类似于前进按钮,当go方法没有参数的时候默认参数为0,这个时候就是刷新该页面

     history.back()      后退,加载前一个url     ,该方法的length属性值不会增加
     等价于history.go(-1);

     history.forward()     前进       等价于     history.go(1);
    如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是静默失败
 
注意:使用历史记录的时候,页面通常从浏览器缓存之中加载,而不是重新向请求发送新的页面
location对象
属性

     1、location属性
      window对象的location属性引用的是location对象,他表示窗口中当前显示的内容的URL,document的location属性也使用location对象 window.location === document.location       //true;
     
    2、URL属性
     document.URL属性表示文档首次载入后保存文档的URL静态字符串。

Location 对象属性:
hash             设置或返回从井号 (#) 开始的 URL(锚)。
host              设置或返回主机名和当前 URL 的端口号。
hostname     设置或返回当前 URL 的主机名。
href              设置或返回完整的 URL(location.toString()返回href属性的值)。
pathname     设置或返回当前 URL 的路径部分。
port              设置或返回当前 URL 的端口号。
protocol       设置或返回当前 URL 的协议。
search          设置或返回从问号 (?) 开始的 URL(查询部分)。

Location 对象方法:
assign()   加载新的文档。
reload()   重新加载当前文档。
replace() 用新的文档替换当前文档(无法‘后退’,替换掉之前的文档)
        如果检测到浏览器不支持某些特性,可以用location.replace()来重定向载入不含该特性的版本,如:if(!XMLHttpRequest){ location.replace('staticpage.html');}这里使用相对URL,指相对当前文档的目录来解析
        使浏览器跳转到新页面,最简单的方法是location = '绝对URL地址或相对URL';
        使文档滚动到标识符指定的位置,location = '#idname',特殊标识符#top滚到文档顶部(前提是文档内不存在id为top的元素)

window事件

onload:加载事件网页加载完毕后执行。

onscroll:滚动事件。

onresize:窗口缩放事件。

// 获取浏览器视窗宽度/高度

document.documentElement.clientWidth;

document.documentElement.clientHeihgt;

// 获取浏览器滚动条隐藏的宽度/高度

chrome(body)、火狐、IE(documentElement)

document.documentElement.scrollLeft || document.body.scrollLeft;

document.documentElement.scrollTop || document.body.scrollTop;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值