关于浏览器的方法

发布于 2020-04-06  556 次阅读


浏览器三大弹窗操作

警告框

window.alert('弹出内容')   /  alert('弹出内容')

输入框

window.prompt('提示内容')  /  prompt('提示内容')

可以使用变量,存储输入数据
输入的数据都是字符串类型

确认框

window.confirm('提示内容')  /  confirm('提示内容')

使用变量存储 确认框 执行结果
点击 确定 返回结果是 true
点击 取消 返回结果是 false

浏览器地址操作

window.location.href   浏览器地址栏信息

浏览器地址栏中,中文显示为  %两位十六进制数值
这是 浏览器 自行 转化显示的结果 我们不用管,浏览器可以自动的编译解析

 window.location.search

可以获取浏览器地址栏中,get方式传的数据信息

中文显示为 %两位十六进制数值

获取结果是一个字符串形式,希望可以将 字符串 转化为 对象形式
输入 键名可以获取参数数据
        var res = getUrlVal();
        // 获取地址栏数据信息
        // 地址栏中,?问号之后的get方式的传出数据
        // 以对象的形式返回
        function getUrlVal(){
            // 创建空对象,准备存储键值对数据信息
            var obj = {};

            // 1, 获取 字符串结果,第一位是 ? 问号 需要删除
            // 使用 substr 截取 ,从 字符串的第二个字符串,也就是索引是1的字符开始截取
            var str =  window.decodeURI( window.location.search).substr( 1 );

            // 2, 每一个键值对,以 & 符号作为间隔,将字符串转化为数组
            // 数组中的每一个单元,就是传参的键值对
            // username=张三   userpwd=123456   age=18   sex=男
            var arr = str.split('&');

            // 3, 数组中的每一个单元存储的数据,都是 键值对字符串
            // 语法形式都是 键名=数值
            // 按照 等号 做间隔 可以将 键值对字符串,转化为 两个单元的数组
            // 第一个单元存储键名        第二个单元 存储键值

            // forEach 中 第一次参数val  存储 的是 单元的数据
            // 也就是 键值对字符串
            // 将 val 键值的字符串 按照 = 等号 为间隔,转化为数组
            arr.forEach(function(val){
                // arr2中的数据
                // 索引是0 的 单元 存储的是 键值对的 键名 --- 对象的属性
                // 索引是1 的 单元 存储的是 键值对的 数据 --- 对象的属性值
                var arr2 = val.split('=');
                // 将 arr2[0] 作为对象的键名  arr2[1] 作为对象的键值
                obj[ arr2[0] ] =  arr2[1]
            })

            return obj;
        }
        console.log(res);

window.decodeURI()  window.decodeURIComponent()

都可以解析编译 地址栏信息中的 中文乱码

window.location.href = 'url地址' 可以设定页面的浏览器地址栏信息

一般用于页面的跳转

浏览器版本信息

存储在 window.navigator 属性中

window.navigator.userAgent   浏览器的型号,内核,版本信息等

window.navigator.appName     Netscape网景公司

window.navigator.appVersion  浏览器版本

window.navigator.platform    操作系统的版本信息

浏览器的历史记录

存储在 window.history 中

window.history.length : 长度 也就是当前窗口 访问页面的个数

window.history.back()     返回上一个访问的页面  功能对应浏览器 后退 按钮

window.history.forward()  返回下一个访问的页面  功能对应浏览器 前进 按钮

window.history.go()       设定跳转次数,跳转至指定页面  跳转的次数 是  目标页 - 当前页

注意:

1.浏览器次数的记录,一定是当前窗口打开的页面

新窗口打开的页面,不算浏览次数

2.go() 只能在 浏览次数范围内跳转 如果超出范围,没有执行效果


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。