1、window对象
window表示浏览器的一个实例,是一个Global对象。所有在全局作用域中声明的变量、函数都会变成window对象的属性方法。
(1)作用域
var color = 'red';
//可以用个window.color访问color的值,不能删除
delete window.color;//false
window.age = 25;
//可以使用delete删除window.age属性
delete window.age;//true
全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。因为[[configurable]]的特性
(2)窗口关系以及框架
top、parent是window的属性,self和window可以互换使用
//链式调用
window.parent.parent.frames[0];
(3)窗口的位置
整个浏览器窗口相对于屏幕左边和上边的位置,Chrome,Safari,Firefox
或从屏幕左边或者上边到由window对象表示的页面可见区域的距离,IE,Opera
//浏览器差异
window.screenLeft
window.screenTop
或
window.screenX
window.screenY
将窗口精确的移动到一个新的位置
//不适用框架,只能对最外层的window对象,默认被浏览器禁用
window.removeTo(0, 0);
window.removeBy(0, -50);
(4)窗口大小
//
window.innerWidth
window.innerHeight
window.outerWidth
window.outerHeight
//页面视口的宽度
document.documentElement.clineWidth
document.documentElement.clineHeight
document.body.clineWidth
document.body.clineHeight
不同浏览器之间对上面的属性定义有差异,无法获取浏览器窗口本身的大小,可以获取页面视口的大小
//窗口可视范围高度
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
调整窗口的大小
window.resizeBy(100, 200);
window.resizeTo(300, 400);
这方法可能被浏览器禁用,不适用框架,只对最外层的window对象有用
(5)导航和打开窗口
window.open('http://ww.wrox.com', 'topFrame', 'height=400,width=300,top=10,left=10')
//window.open(url, 窗口目标,字符串, 布尔值),返回新窗口的引用
//第二参数的值_self,_parent,_top,_blank
//第三参数'fullscreen,height,width,left,location,resizable,scrollbars,status,top,toolbar,menubar'
//第四参数表示新页面是否取代浏览器历史记录中当前加载页面
关闭窗口
window.close()
(6)系统对话框
显示系统对话框,代码停止执行,而关掉这些对话框后代码又恢复执行。系统对象框外观不可以通过css改变。
alert('hello world');
confirm('are you sure?');//返回布尔值
prompt("what's you name?", 'lili'); //null或input的值
查找和打印
window.print()
window.find()
2、location对象
提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能(将URL解析为独立的片段)
不仅是window的属性,还是document的属性
window.location === document.location
//指向同一个对象
(1)查询字符串参数
function getQueryStringArgs(){
let qs = location.search.length > 0 ? location.search.substring(1) : '';
let args = {},
items = qs.length ? qs.split('&') : [];
name = null,
value = null;
items.forEach((item)=>{
let tempItem = item.split('=');
name = decodeURLComponent(tempItem[0]);
value = decodeURLComponent(tempItem[1]);
if(name.length){
args[name] = value;
}
});
return args;
}
(2)位置操作
打开新URL,并在浏览器的历史记录中生成一条记录,通过点击‘后’退按钮都会导航到前一个页面
location.assign('http://www.wrox.com');
location.href = 'http://www.wrox.com';
window.location = 'http://www.wrox.com';
//修改location的其他值,改变当前加载的页面
location.hash = '#search1';
location.search = '?q=js';
location.hostname = 'www.yahoo.com';
location.pathname = 'mydir';
location.port = 8080;
replace方法不生成新记录,用户不能回到前一个页面
location.replace('http://www.wrox.com')
重新定向到http://www.wrox.com,然后‘后退’按钮将处于禁用状态,如果不重新输入完整的URL,则无法返回前一个页面。
reload方法
location.reload();//重新加载,有可能从缓存中加载
location.reload(true);//重新加载,从服务器重新加载
3、navigator对象
识别客户端浏览器的事实标准,通常用于检测显示网页的浏览器类型
(1)检测插件
navigator.plugins
(2)注册处理程序
有兼容性问题
navigator.registerContentHandler(mime类型,URL, 应用程序名称)
navigator.registerProtocolHandler(协议,URL, 应用程序名称)
4、screen对象
浏览器窗口外部的显示器的信息,如像素宽高。
screen.availWidth
等等
5、history对象
从窗口打开的那一刻算起,保存着用户上网的历史记录,但出于安全考虑,无法通过程序获取history对象中的具体信息
history.go(-1);//后退
history.go(1);//前进
history.go(2);//前进两页
histrory.go('wrox.com');//跳转到历史记录中包含该字符串的第一个位置
history.back();
history.forward();
history.length属性
histroy.pushState(stateObj, title, URL);
histroy.replaceState(stateObj, title, URL);
pushState只是在历史记录中增加一条新的记录,把当前页面作为历史的记录保存到history的历史记录中。将当前浏览器的地址栏改为参数url的指定的值,但并不会加载它。这点与普通的通过链接打开或浏览器地址输入url完全不一样。
replaceState只是改变当前页面在history对象中的记录信息。地址栏的地址不断变化,页面内容不变