location和histroy和navigator的讲解-优快云博客

1.location

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

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

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

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

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

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

console.log(window.location); window可以省略
console.log(location);
location的属性
console.log(location.hash);//返回锚点有就返回锚点值没有就是空
console.log(location.host);//主机地址访问地址www.baidu,com /14.215.177.3
console.log(location.hostname);//主机名 www.baidu.com
console.log(location.href);//链接地址 https:www.baidu.com
console.log(location.port);//端口号 //默认的浏览器占用端口80
console.log(location.portocol);//协议名 https http(默认的) file协议
console.log(location.pathname);//路径名拿到访问的路径地址/主机名或端口号后面的资源路径地址
console.log(location.search);//用来接收？传递值获取？后面的信息
console.log(location.origin);//跨域信息
//通过地址栏来进行页面跳转给href赋值
location.href = 'https://www.baidu.com'
//通过assign方法来跳转页面传入的参数是你需要跳转的页面
location.assign('https://www.tabao.com')
//reload方法重新加载
location.reload()//默认从缓存中加载（速度更快）
location.reload(true)//去服务器端加载
//跳转页面他会移除当前页面在历史记录里面
location.replace()

2.histroy是历史对象保存历史页面


<a href="./history01.html">去新的页面</a>
    <button onclick="fn()">前进</button>
    <button onclick="fn1()">后退</button>
    <button onclick="fn2()">跳转到第一个历史页面</button>
    <script>
        console.log(history);
        function fn(){
            history.forward() //前进的方法
        }
        function fn1(){
            history.back() //后退的方法
        }
        function fn2(){
            // 默认自己这页是0 -1 -2(后退)   1 2（前进）
            history.go(2) //去任意历史页面
        }
        // 添加的状态值 取出来的话 history.state
        //添加一个数据（可以是任意类型） 添加的数据 会存入state
        //添加一个历史记录 第一个参数为数据 第二个参数为标题 第三个参数为url地址（可以省略）（必须要和本身具备相同的orgin值）
        history.pushState('hello','hello')
        //替换state值 在对应的url
        history.replaceState('world','world')

3.navigator

console.log(navigator.appName);//浏览器名称
        console.log(navigator.appVersion);//浏览器版本
        console.log(navigator.platform);//操作系统
        //重点 用户代理信息 里面存放了用户的系统版本浏览器及相关的信息
        console.log(navigator.userAgent);
        // screen获取用户屏幕信息
        console.log(screen.availHeight);//屏幕高
        console.log(screen.availWidth);//屏幕宽