day8 BOM学习

一、window

    Bom===borwer  object  model  浏览器对象模型

       1.bom是进行浏览器操作的

       2.Bom里面是存在多个对象的

       3.Bom实际进行操作浏览器是使用多个对象里面的属性以及方法

       4.Bom没有规范

        // 顶层对象  window 所有的其他使用的对象都是通过window扩展出来的

        // window的方法及属性  可以省略window  alert===window.alert

        // window表示的是浏览器窗口

        console.log(window.innerHeight);//获取浏览器窗口可视区域的高度

        console.log(window.innerWidth);// 获取浏览器可视区域的宽度

        // 弹窗方法

        window.alert("你好")//提示窗  没有返回值

        console.log(window.confirm("您确认要删除吗"));//弹窗  交互窗 点击确认返回true  点击取消返回false

        window.prompt("请输入你的号码","123")//弹出输入窗  返回时string  123是返回的默认值

        window.console.log()//window.是可以被省略的

        // 打开一个新窗口  window.open

        // 默认打开的是新窗口  打开方式就是_blank

        // 指定在本窗口打开 _parent

        // 第一个参数是打开的位置url  第二个参数是打开的方式也可以是窗口的名字  第三个是其他的设置

        window.open('http://www.baidu.com','百度','width=500px,height=500px,top=100px,left=100px')

        //可以指定对应窗口的一些设置  一般在位置上的时候还是会指定上和左 不会指定下和右

        // 点击html的任意位置  调用方法  window对象每一个浏览器都会有个

        // opener 表示父窗口  我打开的浏览器窗口和我本身的窗口对应的window不一致不一致

        document.onclick=function(){

            //输入对应的内容到文档上

            opener.document.write("调用父窗口对象输出")

        }

   

        //关闭窗口  浏览器不允许

        window.close()

        window.print()//弹窗页面进行打印

        wndow.setInterval(function(){//定时器

           

        }, 2000);

        window.setTimeout(function(){//延时器

        })

 

二、location

　　// document(核心):文档对象，让我们可以在js脚本中直接访问页面元素(DOM)

        // history(重要):历史对象,包含窗口的浏览历史，可以实现后退

        // location(重要):包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面

        // frames:框架对象，可以获取页面框架内容

        // screen:包含有关客户端显示屏幕的信息

        // navigator:导航对象，包含所有有关访问者浏览器的信息(浏览器版本信息等―最新版本的浏览器是不支持的)

        // location 的属性

        location.hash()//返回对应锚点  有就返回锚点值  没有就是空

        location.host()//主机地址  访问的地址 127.0.0.1  www.baidu.com

        location.hostname()//主机名  www.baidu.com

        location.href()//链接地址  http://www.baidu.com

        location.port()//端口号  默认的浏览器占用端口80  地址栏没有显示端口就没有端口

        location.protocol()//协议 https   http   //之前的  file协议

        location.pathname()//路径名  拿到访问地址后的路径地址  主机名或端口号后面的  资源路径地址

        location.search()//接收?传递值  获取？后面的信息

        location.origin()//跨域地址

       

        // 通过地址栏来进行页面跳转

        // location.href="http://baidu.com"

        // location 的方法

        // 通过assign方法来跳转页面  传入的参数就是你需要跳转的页面  A，B页面都会保留在历史记录里面

        location.assign()

        // reload方法  重新加载

        location.reload()//默认会从缓存中加载 (速度会更快)

        location.reload(true)//去服务器中端加载

        // 跳转页面 他会移除当前页面在历史记录里面

        // 替换本身地址来完成跳转  同时删除本身历史记录 只会保留B页面

        location.replace()

 

三、history

　　// history 是历史对象  会保存历史页面

        // history属性

        // history.length属性  返回历史页面个数

        // history.state  状态值  没有存放默认值为none

        // history 方法

        history.forword()  //前进方法

        history.back() //后退

        history.go()  //去任意历史页面   默认自己这页是0

        history.pushState//添加一个数据，添加的数据会存入state

        // 添加一个历史记录  第一个参数为数据  第二个参数为标题  第三个1参数为url地址（可以省略）

        history.replaceState()//替换state值

 

四、navigator

　　导航对象用来获取浏览器的相关信息

        console.log(navigator . appName);//浏览器名称

        console.log(navigator.appVersion);//浏览器版本

        console.log(navigator.platform);//操作系统

        //重点用户代理信息里面存放了用户的系统版本浏览器及相关的信息

        console.log(navigator.userAgent);

        // screen获取用户屏幕信息

        screen.availHeight//屏幕高

        screen.availWidth//屏幕宽