js 判断窗口是否已经打开了url_BOM及js三大家族的回顾

Window对象

获取显示屏的宽高

screen.height,screen.width
screen.availHeight,screen.availWidth  //除去任务栏的宽高

获取窗口相对于屏幕的宽高

window.screenLeft
window.screenTop

获取浏览器窗口的宽高和可视区域的宽高（ie8及以下不兼容）

window.innerWidth        //可视区域宽
window.innerHeight       //可视区域高
window.outerWidth        //浏览器窗口宽
window.outerHeight        //浏览器窗口高

//兼容写法
//无法获取浏览器窗口本身大小只能获取视口
document.documentElement.clientWidth    //可视区域宽
document.documentElement.clientHeight   //可视区域高

//能力检测
function getClient() {
    return{
        width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
        height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
    }
}

显示打印窗口（打印机）

window.close()

关闭当前窗口

window.close()

打开一个新窗口

window.open

window.open(“URL”,”name”,“设置特征”);
width：宽度
height：高度
left：左端距离
top：顶端距离
scrollbars：yes(1)，no(0)
toolbar：yes（1），no（0）
location：yes（1），no（0）

<script type="text/javascript">		
window.open("window.close.html","bd","width=500,height=300,top=100,left=300,scrollbars=yes,toolbar=no,location=no");
</script>

//window.open("https://www.baidu.com");   链接跳转

location对象

获取url的信息

location.host   //返回服务器的名称和端口号，没有返回空白字符串
location.hostname   //返回不带端口号服务器的名称，没有返回空白字符串
location.port   //返回端口号，没有返回空白字符串
location.href   //获取完整url地址
location.protocol  //获取页面的协议 http/https/ftp等等
location.pathname  //返回url中的目录或文件名

修改url信息

假设的url地址为https://www.baidu.com
location.hash = "zhidao";  
//修改后 https://www.baidu.com#zhidao

location.search = "?id=10"; 
//修改后 https://www.baidu.com?id=10

location.pathname = "tieba"; 
//修改后 https://www.baidu.com/tieba

location.port = "8080";
//修改后 https://www.baidu.com:8080

任何修改url的行为都会在浏览器历史记录中生成一条新纪录

页面刷新

location.reload()       //重新加载（有可能从缓存中加载）
location.reload(true)   //强制刷新，从服务器重新加载

JS实现URL跳转的方式

window.open("https://www.baidu.com");     //新窗口跳转
window.location("https://www.baidu.com")   //当前窗口跳转
location.href = "https://www.baidu.com";   //当前窗口跳转
location.assign("https://www.baidu.com");  //当前窗口跳转
location.replace("2.html")    //当前窗口跳转，删除历史记录，不能返回上一页

history对象

前进/后退

history.go(1)  //前进1页
history.go(-1)  //后退1页
history.go(2)  //前进2页
history.go("php.com")  //跳转到最近的php.com,可能前进也可能后退，具体看哪个位置更近

还有两个简写方法：
history.forward()    //前进一页
history.back()       //后退一页

查看历史记录的数量

history.length

//可以判断用户是否一开始就打开了你的窗口
if(history.length==1){
    
}

navigator对象

navigator.language      //浏览器的主语言
navigator.cookieEnabled   //是否启用cookie
navigator.platform      //浏览器所在系统平台
navigator.userAgent     //浏览器加系统平台

三大家族

client系列

• clientWidth:可视区域的宽(没有边框),边框内部的宽度
• clientHeight:可视区域的高(没有边框),边框内部的高度
• clientLeft:左边边框的宽度
• clientTop :上面的边框的宽度

scroll系列

• scrollLeft:向左卷曲出去的距离
• scrollTop:向上卷曲出去的距离
• scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
• scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框

offset系列

• offsetWidth:元素的宽,有边框
• offsetHeight:元素的高,有边框
• offsetLeft:元素距离左边位置的值
• offsetTop:元素距离上面位置的值

---

输出的几种方式

1. alert
2. console.log
3. document.write
4. prompt()
5. confrim() //对话框确定和取消两个选项
6. console.error() //控制台输出错误信息
7. console.table() //以表格的形式输出

prompt输出的内容

console.table打印数组如果打印的数据不是键值对的形式，那么以console,log的形式打印