JavaScript中的BOM操作（二）

一、获取浏览器地址栏信息

window.location

//获取浏览器地址栏信息
console.log(window.location);

1、页面刷新
window.location.reload()方法不能直接写，否则会一直刷新，一般用于事件判断和绑定执行，不能单独执行

//点击按钮，刷新指定页面
btn.onclick = function(){
    window.location.reload();
}

2、获取地址栏信息内容 window.location.herf()方法获取地址栏的信息、将内容转为中文正常显示，

//获取地址栏信息
console.log(window.location.herf);
//将地址中文正常显示
console.log(decodeURIComponent(window.location.herf))

3、获取地址栏中主机地址 window.location.host当页面再服务器运行时,可以获取服务器主机地址信息,一般是IP地址或者域名
4、获取地址栏信息中端口的数值window.location.port 用于计算机本身沟通
5、获取地址栏信息中传参的数据 window.location,search
　　　　格式是地址?传参的数据
　　　　获取的是 ?以及之后的内容
二、操作导航栏

1、设定页面跳转地址
window.location.herf = 'baidu.com';

//点击标签触发代码程序
    d.onclick = function(){
        window,location,herf = 'http://baidu.com';
    }
    //定义倒计时
    var int = 5;
    //定义定时器
    setTnterval(function(){
        // 输出内容,倒计时时间是变量
        d2.innerHTML = `请您注意,${int}秒之后,跳转至新浪页面`;
        // 倒计时时间做 -- 递减操作
        int--;
        // 倒计时时间到达,执行页面跳转操作
        if(int == -1){
            window.location.href = 'https://www.sina.com';
        }
    }, 1000);

2、获取浏览器相关信息

//获取浏览器相关信息
console.log(window.navigator);
// 获取浏览器版本号,内核,型号,等相关信息
console.log(window.navigator.userAgent);
// 现在为了致敬网景公司,appName,统一都是 Netscape
console.log(window.navigator.appName);
// 浏览器软件版本信息
console.log(window.navigator.appVersion);
// 本地电脑,操作系统信息
console.log(window.navigator.platform);

三、浏览器的跳转

window.history可以通过JavaScript程序,实现浏览器按钮的前进后退功能,一般多用于页面注册,填写信息,电商购物平台的上一步,下一步等类似操作使用
console.log( window.history )

//当前窗口一共访问过几次页面
window.history.lenght
//返回上一个页面
window.history.back
//前进，进入下一个页面
window.history.forward
//跳转到几个页面，+代表前进-代表后退
window.history.go(数字)

注：
1、重复访问，即使页面重复，length也会增加，
2、length只记录本窗口访问的次数,新窗口访问的不算
3、target="_blank" 不算length长度
4、如果浏览页面过多,如何判断访问的页面
通过超链接来控制用户访问的页面和跳转的聂荣
例如:

/*
demo中
    页面1,只能去页面2
    页面2,只能去页面3
    页面3,只能去页面4
    页面4,只能去页面5
    页面5,只能去页面6
    页面6 就到头了
这样的话,每次跳转的内容就是固定的内容
*/

四、BOM操作的常见事件

1、点击事件clcik
onclcik绑定点击
标签ID.onclick = function(){
程序；
}
示例1、

d1.onclick = function(){ 
    console.log('我是div,有人点我');
}

示例2、

function fun(){
    console.log('我是定义好的函数程序,绑定给div点击事件')
}
var fun2 = function(){
    console.log(123)
}
// 给点击事件,绑定一个fun函数名称中,存储的函数地址
// 触发事件时,调用地址,找到对应的函数,执行函数程序
d2.onclick = fun ; 
d3.onclick = fun2 ;

注：
A、需要绑定已经定义的函数
B、调用时绝对不能有()
C、必须绑定函数名称,或者变量名称

2、load事件：
window.onload = function(){程序} 页面加载事件
注：
A、绑定load事件，让程序在页面加载完毕之后,再执行，不推荐使用这种方法
B、一般是将script标签,写在程序的最下方
3、open事件
window.open('url地址) 定义打开的页面 --- 新窗口打开页面
示例1、

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

示例2、

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

4、scroll事件
window.onscroll = function(){} 滚动条事件

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

5、resize事件
window.onresize = function(){}

// 当页面大小发生改变时,触发事件
window.onresize = function(){
    console.log('我改了');
}

6、close事件

window.close()

window.close()
// 关闭当前页面事件
c.onclick = function(){
    window.close();
}

注：
A、常用的click 和 scroll
B、有的有on有的没on，如close和open没on

JavaScript中的BOM操作（二）

猜你喜欢