window
window 对象(表示浏览器窗口):
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
HTML DOM 的 document 也是 window 对象的属性之一
window 尺寸:
查看window尺寸有三种方式适用于不同的情况:
1) w3c标准(适用于老版本ie之外的浏览器)
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
2) 老版本的IE浏览器
标准模式:
document.documentElement.clientHeight
document.documentElement.clientWidth
怪异模式(向后兼容)中:
document.body.clientHeight
document.body.clientWidth
(如何知道是何种模式?
console.log(document.compatMode)可以查看文档是以什么方式进行解析的
CSS1Compat 标准模式
BackCompat 怪异模式
)
function getScreen(){ //获取屏幕的可视宽高
if (window.innerWidth) { //如果window底下有这个属性,就用这个, w3c标准
return {
width : window.innerWidth,
height : window.innerHeight
}
}else{ //老版本IE
if(document.compatMode == "CSS1Compat"){ //标准模式
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}else{ //怪异模式
return {
width : document.body.clientWidth,
height : document.body.clientHeight
}
}
}
}
console.log(getScreen())
其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
<script>
document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>
2.1 screen 对象(包含有关用户屏幕的信息)
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
location
3.1 location对象(用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面)
console.log(location.href) //返回(当前页面的)整个 URL:
console.log(location.hash) //hash 哈希值,也叫锚点,比方说a链接中的
console.log(location.host) // host 设置或返回主机名和当前 URL 的端口号。
console.log(location.hostname) // hostname 设置或返回当前 URL 的主机名。
console.log(location.pathname) // pathname 设置或返回当前 URL 的路径部分。
console.log(location.port) // port 设置或返回当前 URL 的端口号。
console.log(location.protocol) // protocol 设置或返回当前 URL 的协议。
console.log(location.search) // search 参数(查询字符串) 设置或返回从问号 (?) 开始的 URL(查询部分)。
// location.href = "http://www.baidu.com" //放到某一个事件中去触发
history(包含浏览器的历史记录)
- history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同 ```javascript 去百度
var btn1 = document.getElementsByTagName("button")[0]; var btn2 = document.getElementsByTagName("button")[1];
btn1.onclick = function(){
history.back()
}
btn2.onclick = function(){
history.forward()
}
</script>