挂载在window全局对象的可操作的方法 open close
var newPage = window.open('http://baidu.com','跳百度','width=500,height=500');
newPage.moveTo(300,300);
setTimeout(()=>{window.close()},3000)
window有个location属性 location对象下有很多关于url的属性
假如当前地址是http://localhost:8080/list?a=2#test
则location下的属性值分别是
protocol ‘http:’ 协议的意思
hostname “localhost” 域名的意思
port “8080” 端口
host hostname+port
pathname “/lsit” 目录
search '?a=2' 参数
锚点 “#test” hash
origin "http://localhost:8080" 源
location的方法
location.assign('地址') 打开新的页面 (在原页面基础上) 但是可以返回
location.replace('地址') 在原页面基础上替换成新的页面 不能返回
location.reload() 重新加载页面(文档)
一般可以通过改变href 和 hash属性值来做操作 通过获取属性值来做判断
location.href('http://baidu.com')//相当于location.assign
https和http
多的s指的是ssl加密协议 (加密 身份认证)
http端口默认80 https端口默认443 ftp协议端口默认21 http连接是无状态的
screen对象 availheight是不包含任务栏高度
history对象 只要是history.length长度 是指页面的个数 history.back() 回退 history.go()前进
获取URL参数
<script>
function getParams(params){
var url =location.href;
// var url = 'http://www.baidu.com/list?a=2&b=3#test';
//?a=2&b=3#test
var reg = /([^?=&#]+)=([^?=&#]+)/g;
var obj = {};
// console.log(reg.test(url));
url.replace(reg,function(){
// console.log(arguments)
obj[arguments[1]]=arguments[2];
})
return obj[params]
}
console.log(getParams('a'));
</script>
stringObject.replace(regexp/substr,replacement)
注意:ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。
监听hash变换 (路由)’
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#item1,#item2,#item3{
width: 100%;
height: 0;
opacity: 0;
}
#item1{
background: aqua;
}
#item2{
background: blue;
}
#item3{
background: blueviolet;
}
#item1.active,#item3.active, #item2.active
{
transform: rotate(720deg);
height: 100%;
opacity: 1;
transition: all 1s;
}
</style>
</head>
<body>
<p>
<a href="#a">跳转A</a>
<a href="#b">跳转B</a>
<a href="#c">跳转C</a>
</p>
<div id="item1" class="active"></div>
<div id="item2"></div>
<div id="item3"></div>
<script>
hideClass();
hashCallBack();
window.onhashchange= hashCallBack;
function hideClass(){
var oDiv= document.getElementsByTagName('DIV');
for(var i=0;i<oDiv.length;i++)
{
oDiv[i].className='';
}
}
function hashCallBack(){
hideClass();
if(location.hash=='#a')
{
document.getElementById('item1').className='active';
}
else if(location.hash=='#b')
{
document.getElementById('item2').className='active';
}
else
{
document.getElementById('item3').className='active';
}
}
</script>
</body>
</html>