JS BOM操作地址栏、浏览器信息

获取浏览器地址栏信息

window.location
console.log(window.location);
浏览器的地址信息:
在 window 中有一个对象叫做 location
就是专门用来存储浏览器的地址栏内的信息的
href属性 控制浏览器地址栏的内容
reload()方法 刷新页面
注意： 不要写在全局，不然浏览器就会一直处在刷新状态

1. window.location.reload() 方法

页面重新加载/刷新方法
window.location.reload(); 不能直接写,否则会一直刷新
一般是于判断和事件绑定执行,不能单独执行
点击刷新,5秒钟之后刷新
移动端,浏览器刷新不方便点击,可以设定按钮点击

    btn.onclick = function(){
        window.location.reload();
    } 

2. window.location.herf

获取地址栏的信息内容
中文 显示为 %两位十六进制数值
可以将 %XX 转化为中文
直接获取地址栏信息:
onsole.log(window.location.href);
将地址栏信息中文正常显示: decodeURIComponent()
console.log(decodeURIComponent(window.location.href)) ;

3. window.location.host

获取地址栏信息中,主机地址信息
当页面再服务器运行时,可以获取服务器主机地址信息,一般是IP地址或者域名

4. window.location.port

获取地址栏信息中,端口的数值
所谓的端口,是计算机程序,与计算机本身,沟通的通道
每一个软件,运行时,都要有独立的与计算机沟通的通道
这个通道,我们称为 端口
每个软件都有一个独立的端口
此时获取到的往往是 服务器 运行的端口

5. window.location.search

获取地址栏信息中,传参的数据
在浏览器地址栏中,可以实现数据的传递,也就是传递参数
格式是 地址?传参的数据
获取的是 ?以及之后的内容

BOM操作之编程导航

 <div id="d">点我去百度</div>

    <div id="d2"></div>

    <script>
        // 之前页面跳转,只能通过超链接来实现
        // 现在通过JavaScript,可以给所有标签添加事件,触发页面跳转效果

        // window.location.href 可以获取地址浏览信息
        // window.location.href = url地址 可以设定,跳转页面地址
        // 地址必须是字符串形式

        // 点击 div 标签,触发代码程序
        d.onclick = function(){
            // 设定跳转地址是 百度
            window.location.href = 'https://www.baidu.com';
        }

        // 5秒以后,跳转网站
        // 通过定时器实现
        
        // 定义变量,存储倒计时的起始时间
        var int = 5;
        // 定义定时器
        setInterval( function(){
            // 输出内容,倒计时时间是变量
            d2.innerHTML = `请您注意,${int}秒之后,跳转至新浪页面`;
            // 倒计时时间做 -- 递减操作
            int--;
            // 倒计时时间到达,执行页面跳转操作
            if(int == -1){
                window.location.href = 'https://www.sina.com';
            }
        } , 1000);

BOM操作之浏览器信息

1. BOM操作之获取浏览器相关信息
   console.log(window.navigator);
2. 获取浏览器版本号,内核,型号,等相关信息(是获取的浏览器的整体信息)
   console.log(window.navigator.userAgent);
3. 浏览器软件名称
   任何一个浏览器,获取结果都是 Netscape 网景公司
   Netscape 是一个标准浏览器生成公司
   现在为了致敬网景公司,appName,统一都是 Netscape
   console.log(window.navigator.appName);
4. 浏览器软件版本信息
   console.log(window.navigator.appVersion);
5. 本地电脑,操作系统信息
   console.log(window.navigator.platform);

浏览器的历史记录

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history
对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能。

• history.go() 函数 – 前进或后退指定的页面数（负数后退，正数前进）
• history.back() 函数 – 后退一页
• history.forward() 函数 – 前进一页
• history.length 属性 – history对象中缓存了多少个URL

浏览器的事件

• onload事件： 页面内容加载完成（DOM结构，图片…）后触发
• onscroll事件： 拖动浏览器的滚动条触发此事件。
• onresize事件：浏览器窗口缩放所触发此事件。

滚动条的距离

滚动条距离（某些浏览器下面做兼容–没有 DOCTYPE声明的时候）
document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop || document.body.scrollTop;
BOM操作、浏览器滚动条操作介绍

定时器

• setInterval(函数名称，时间)；间隔定时器(反复调用)
• clearInterval( 定时器的返回值 ); 停止定时器
• setTimeout(函数名称，时间); 延时定时器，执行一次
• clearTimeout( 定时器的返回值 ); 停止定时器
  date对象、定时器介绍
  清除定时器的两种方法可以混用