BOM操作地址栏信息 BOM操作之编程导航 BOM操作之获取浏览器相关信息 BOM操作之跳转 BOM操作之浏览器常见事件

BOM操作地址栏信息

<button id="btn">点击刷新</button>
<script>
    // 获取浏览器地址栏信息
    // window.location
    console.log(window.location);

    // 1, window.location.reload()  方法
    // 页面重新加载/刷新方法

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

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

    // 2, window.location.herf  
    // 获取地址栏的信息内容
    // 中文 显示为  %两位十六进制数值
    // 可以将 %XX 转化为中文

    // 直接获取地址栏信息
    console.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);
</script>

/ BOM操作之获取浏览器相关信息

    console.log(window.navigator);

    // 获取浏览器版本号,内核,型号,等相关信息
    console.log(window.navigator.userAgent);

    // 浏览器软件名称  
    // 任何一个浏览器,获取结果都是    Netscape 网景公司
    // Netscape 是一个标准浏览器生成公司
    // 现在为了致敬网景公司,appName,统一都是 Netscape
    console.log(window.navigator.appName);

    // 浏览器软件版本信息
    console.log(window.navigator.appVersion);

    // 本地电脑,操作系统信息
    console.log(window.navigator.platform);

BOM操作之跳转

    // BOM 操作之浏览器的跳转  window.history
    // 在一个浏览器窗口中,打开页面,会有前进,后退,操作
    // 可以通过JavaScript程序,实现 浏览器按钮的 前进 后退 功能
    // 一般多用于页面注册,填写信息,电商购物平台
    // 上一步,下一步等类似操作使用

    console.log( window.history )

    // window.history.lenght      当前窗口一共访问过几个页面
    // window.history.back()      功能就是 后退 功能
    //                            返回到上一个访问的页面
    // window.history.forward()   功能就是 前进 功能
    //                            前进到下一个访问的页面
    // window.history.go(数值)     跳转到指定位置的页面
    //                             通过设定跳转几个页面来实现
    //                             +数值 就是前进 
    //                             -数值 就是后退
    //                             设定的数值是跳转的次数

    // 问题1:
    //   重复访问,length会不会增加?
    //       只要通过超链接访问,或者window.location.herf,跳转访问的页面
    //       即时是重复页面,也会增加 length 长度

    // 问题2:
    //   length,只记录本窗口访问的次数,新窗口访问的不算
    //   target="_blank" 不算length长度

    // 问题3:
    //   如果浏览页面过多,如何判断访问的页面
    //   通过超链接来控制用户访问的页面和跳转的聂荣
    //   例如:demo中
    //   页面1,只能去页面2
    //   页面2,只能去页面3
    //   页面3,只能去页面4
    //   页面4,只能去页面5
    //   页面5,只能去页面6
    //   页面6 就到头了
    //   这样的话,每次跳转的内容就是固定的内容

BOM操作之浏览器常见事件

 <script>
    // 先定义JavaScript程序,此时还没有标签执行
    // 不能给还没有定义的标签,添加事件

    // 可以通过 load 事件,当页面的程序都执行结束之后
    // 也就是有了页面标签之后,再执行JavaScript绑定程序

    window.onload = function(){
        // 当页面加载完毕,也就是页面其他程序都执行结束之后,再执行定义的程序
        d4.onclick = function(){
            console.log('我是第四个div');
        }
    }
    
</script>

<div id="d1">我是div1</div>

<div id="d2">我是div2</div>

<div id="d3">我是div3</div>

<div id="d4">我是div4</div>

<button id="loc">location打开百度</button>
<button id="ope">open打开百度</button>
<br>
<button id="c">关闭页面</button>


<script>
    // BOM操作之浏览器常见事件
    
    // 什么是事件
    // 所谓的事件,就类似于一个约定
    // 当触发条件时,就会执行,指定的程序

    // 例如 clcik 点击事件

    // 给标签绑定点击事件 当标签触发 点击条件时 执行绑定的程序

    // click  点击事件 --- 事件类型
    // onclick  绑定点击事件 , 给标签绑定一个事件类型
    // funciton(){}  事件处理函数 , 触发事件时,执行的程序
    //               也可以是一个已经定义好的函数

    // 给div标签,绑定了一个事件类型
    // 事件类型是点击事件类型
    // 点div标签被点击时,触发执行程序
    d1.onclick = function(){ 
        console.log('我是div,有人点我');
    }

    // 需要绑定已经定义的函数
    // 必须绑定函数名称,或者变量名称
    // 绝对绝对绝对,不能有() 
    // 这里绑定的是,函数名称,变量名称中存储的, 函数的地址

    // 如果有 () , d2.onclick = fun()
    // 将 fun() 的执行结果, 绑定给事件

    function fun(){
        console.log('我是定义好的函数程序,绑定给div点击事件')
    }

    var fun2 = function(){
        console.log(123)
    }

    // 给点击事件,绑定一个fun函数名称中,存储的函数地址
    // 触发事件时,调用地址,找到对应的函数,执行函数程序
    d2.onclick = fun ; 

    d3.onclick = fun2 ; 

    // load 事件  window.onload = function(){}
    // 页面加载事件
    // 当页面程序都加载结束之后,执行的程序
    // 如果JavaScript程序定义在其他程序(html,css)之前,
    // 绑定 load 事件 , 让程序在 页面加载完毕之后,再执行
    // 不推荐使用这种方法
    // 一般是将script标签,写在程序的最下方

    // 外部导入js文件,要么放在head中
    // 要么也放在body的最下方

    // open 事件  window.open('url地址')
    // 定义打开的页面 --- 新窗口打开页面
    // window.location.href = 'url地址'  当前窗口打开页面

    loc.onclick = function(){
        window.location.href = 'https:/www.baidu.com';
    }

    ope.onclick = function(){
        window.open('https:/www.baidu.com') ;
    }

    // scroll  事件  window.onscroll = function(){}
    // 滚动条事件
    // 当浏览器 滚动条 位置发生改变时,触发事件

    window.onscroll = function(){
        console.log('我滚了');
    }

    // resize  事件  window.onresize = function(){}
    // 当页面大小发生改变时,触发事件

    window.onresize = function(){
        console.log('我改了');
    }
    
    // close  事件   window.close()
    // 关闭当前页面事件

    c.onclick = function(){
        window.close();
    }

    // 总结
    // 常用的:
    //   click    scroll   
    //   其他不是很常用
    //   有的有on,有的没有on,是JavaScript的固定语法形式,记住就行了

    
</script>