window对象
- BOM 的核心对象是 window,它表示浏览器的一个实例。在浏览器中, window 对象有双重角色,
它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。 - 尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在
var newValue = oldValue;//error
var newValue = window.oldValue;//这里不会抛出错误 newValue 的值是 undefined
Frame和iFrame框架的使用:(iframe本身就有很多问题,不常用,省略)
-
窗口的位置:(不常用)
- 获得窗口位置 window.screenLeft;window.screenTop
- 移动窗口位置 window.moveTo(0,100);window.moveBy(200,0);
窗口大小,视口大小:
- window.innerWidth
- window.innerHeight
- document.documentElement.clientWidth
- document.documentElement.clientHeight
兼容性写法
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
书中demo是为了兼容ie6的混合模式:
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
console.log(pageWidth)
console.log(pageHeight)
- 打开窗口
- 新标签中打开:window.open(url,name,type)
- type第三个参数字符串,有第三个参数,就会以弹出的形式打开,没有就会在标题栏中打开
- window.open()会返回一个对象,指向原窗口,新窗口对象中的opener == 原窗口window
- 可以调用返回对象的.resizeTo,moveTo,close方法去调整关闭新打开的窗口
var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.resizeTo(100,100)
wroxWin.moveTo(100,100)
wroxWin.close()
当前页面跳转:window.location.href="你所要跳转的页面";
安全:拦截弹窗(浏览器弹出窗口屏蔽程序)
ps:有时候做打印需求,打印机页面也会被浏览器拦截,加上以下代码提高用户体验:
var wroxWin = window.open("http://www.wrox.com", "_blank");
if(wroxWin === null){
alert('弹窗被浏览器拦截,请在关闭拦截后,重新加载页面!')
}
-
间歇调用和超时调用(计时器)
- setTimeout setInterval
- clearTimeout clearInterval
- 会返回一个数值 ID(number类型),该ID是唯一标识,用来关闭计时器
- 尽量使用setTimeout 超时调用
-
对话框
- 简单提示警告对话框alert()
- 确认对话框confirm()有返回值:true/false
if (confirm('继续操作')) {
alert('用户继续了操作')
} else {
alert('用户取消了操作')
}
confirm
- 需要用户输入对话框prompt(),返回值null或者用户输入内容
var result = prompt("Are you ok? ", "");
if (result !== null) {
alert("ok" + result);
} else {
alert('滚')
}
- //显示“打印”对话框 window.print();
- //显示“查找”对话框 window.find();
location 对象
- 提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.既是 window 对象的属性,也是document 对象的属性
location对象属性
- 解析查询字符串 ?a=1&b=2,书中实例
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null, value = null,
//在 for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到 args 对象中
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
- 修改当前页面的方法
- location.assign("http://www.wrox.com");
- window.location = "http://www.wrox.com";
- location.href = "http://www.wrox.com"; //常用,其实就是调用了assign()
- location.replace("http://www.wrox.com/");//不会在history中新增一条访问记录,而是替换当前页面的history
- location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)//在版本更新时有用!
navigator 对象
- 用来获得浏览器的信息,操作信息等
- plugins() 浏览器安装的插件
- 注册处理程序:firefox的registerContentHandler,看了以下没懂
screen 对象
screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的 screen 对象都包含着各不相同的属性
const win = window.open('www.baidu.com', '', 'a')
win.resizeTo(screen.availWidth, screen.availHeight);
以弹窗的形式打开窗口win,并调整win为最大宽高(有些浏览器会禁用resizeTo,可能无效)
history对象
history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window
对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的
window 对象关联。出于安全方面的考虑,开发人员无法得知用户浏览过的 URL。不过,借由用户访问过的页面列表,同样可以在不知道实际 URL 的情况下实现后退和前进。
- history.go(1) 前进一页
- history.go(-1) 后退一页
- history.go(0) 和 location.reload()一样能刷新页面
- history.go(’baidu.‘) 去history中包含baidu的页面
- history.back(); 后退一页
- history.forward(); 前进一页
- history.length;当前history中的url数
用户是否第一次打开页面:
if (history.length == 1) {
alert('这应该是用户打开窗口后的第一个页面')
}
书中length==0?为什么我看的是1