首先, Location、navigator、history、screen都是在window下的属性。写的时候window可以省略
window 全局对象
- window.alert()
- window.prompt()
- window.innerWidth
- window.innerHeight
- window.onresize = function(){}
- window.onload = function(){}
- window.onscroll = function(){}
- window.getComputedStyle() -- doc.currentStyle 兼容IE678
- window.setInterval()/setTimeout()
...
//在window下定义一个函数
window.foo = function(){
//设置页面body为粉色
document.body.style.backgroundColor = "pink";
}
//window.foo()
foo()
//在window对象下 定义一个全局变量
window.aaa = "今天天气不错哦!";
//忽略window
console.log(aaa);
//在window对象添加属性
window.obj = {}
//在obj对象添加属性
window.obj.data = {}
//在window对象下添加方法
window.obj.sayhello = function(){}
//在window对象下添加数组
window.arr = ['aaa','bbb','ccc']
window.location 获取URL(地址)信息
- href
- hostname
- port
- hash
- pathname
- search ?id=10010
- reload()
- replace()
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>location(位置)</title>
<style>
li{
/* width: 300px; */
height: 50px;
line-height: 50px;
border-bottom: 1px solid #000;
list-style: none;
}
button{
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<ul>
<li>location.href=<span></span></li>
<li>location.pathname=<span></span></li>
<li>location.search=<span></span></li>
<li>location.port=<span></span></li>
<li>location.origin=<span></span></li>
<li>location.hostname=<span></span></li>
<li>location.protocol=<span></span></li>
<li>location.hash=<span></span></li>
<button class="btn-refresh">刷新</button>
<button class="btn-link">跳转</button>
<button class="btn-replace">替换</button>
</ul>
<script>
//location 提供的API(属性和方法)
//获取关于地址栏的数据
//协议 主机 端口
//http://192.168.73.28:5500
var texts = document.getElementsByTagName("span")
texts[0].innerText = decodeURIComponent(location.href); //当前页面的地址
texts[1].innerText = decodeURIComponent(location.pathname) //当前页面的地址
texts[2].innerText = location.search //当前页面地址的参数 包括"?"在内的后面字符
texts[3].innerText = location.port //端口
texts[4].innerText = location.origin //资源(HTML css js img)
texts[5].innerText = location.hostname //服务器ip
texts[6].innerText = location.protocol //传输协议http(超文本传输协议)
texts[7].innerText = location.hash //锚点 # ; 包括#字符在内的后面的所有字符
//编码
encodeURIComponent("字符串")
//解码(解码成中文)
decodeURIComponent("字符串")
//
var aBtn = document.getElementsByTagName("button")
//1.0 刷新
aBtn[0].onclick = function(){
//方法
location.reload()
}
//2.0 跳转页面
aBtn[1].onclick = function(){
//方法
location.href = "https://www.sohu.com";
//打开页面
// window.open("https://www.sohu.com");
}
//3.0 替换页面
aBtn[2].onclick = function(){
//方法
location.replace("https://www.baidu.com");
}
</script>
</body>
</html>
window.history 关于历史信息
- history.forword()
- history.back()
- history.go()
window.navigator
- userAgent 判断打开页面的终端(安卓 IOS 电脑)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>navigator</title> </head> <body> <script> //navigator // 获取当前浏览器相关数据 console.log(navigator.userAgent ) //获取当前设备信息的属性 console.log(typeof navigator.userAgent ) //获取打开当前页面的设备信息 var userAgent = navigator.userAgent; //判断userAgent变量(字符串) //安卓 Android Q if(userAgent.indexOf("Android") > -1){ console.log("安卓手机浏览器") document.body.style.backgroundColor = "red" }else if(userAgent.indexOf("iPhone") > -1){ console.log("苹果手机浏览器") document.body.style.backgroundColor = "green" }else{ console.log("PC端浏览器") document.body.style.backgroundColor = "blue" } </script> </body> </html>
window.screen 关于客户端屏幕信息
width height availWidth availHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>screen</title>
</head>
<body>
<script>
//screen
//window.screen
//关于客户端屏幕信息
console.log(screen)
//获取客户端的尺寸
var width = screen.width; //客户端屏幕的宽度,px(像素)
var height = screen.height; //客户端屏幕的高度,px(像素)
var availWidth = screen.availWidth; //客户端屏幕可用的高度(除去任务栏),px(像素)
var availHeight = screen.availHeight; //客户端屏幕可用的高度(除去任务栏),px(像素)
console.log(width,height,availWidth,availHeight)
</script>
</body>
</html>