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
网友评论