JS BOM

最新推荐文章于 2024-06-16 18:09:06 发布

前端小臂猿

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量38

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_64337756/article/details/122072935

版权

BOM(Browser Object Model)：浏览器对象模型

window

系统提示框
- alter(弹出内容); 弹窗
- prompt(提示内容); 带有输入的用户提示框
  - 返回值：点击确定返回输入框的内容取消：返回null
- confirm(提示内容); 带有确定和取消用户提示框

返回值：确定 ->true 取消->false

open及close
- open(url,_self/blank,外观设置,布尔值); 打开新窗口

close();//关闭窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // window:浏览器的顶层对象
        // 全局作用域下所有的变量或函数都属于window的属性  window可以省略

        /* 
            系统提示框
            alter(弹出内容);  弹窗
            prompt(提示内容);  带有输入的用户提示框
                返回值：点击确定返回输入框的内容  取消：返回null
            confirm(提示内容);  带有确定和取消用户提示框
                返回值：确定 ->true  取消->false
        */
        console.log(window);
        window.alert("哈哈");

        var res =  window.prompt("请输入你想输入的");
        console.log(res);

        var res1 = confirm("你确定删除吗");
        console.log(res1);
    </script>
</body>
</html>

location

包含url地址详细信息

href:给值就是设置不给值就是获取操作url发地址
protocol 协议
pathname 访问的路径
search:获取传递给服务器参数 ?参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // location  包含url地址详细信息
        console.log(window.location);

        // href:给值就是设置  不给值就是获取   操作url发地址
        console.log(location.href); //获取当前地址栏中完整url地址  获取的的只是一个字符串

        document.onclick = function () {
            location.href = "https://www.jd.com";
        }


        // protocol  协议
        // https://www.baidu.com/
        console.log(window.location.protocol); //https


        // https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&fenlei=256&rsv_pq=967f9b17000176db&rsv_t=c8252r5qJn130t3JXrOowYCr6Fdp2cw%2FEGDeHEm5InmBGS38vyGXCAIar5Q&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=3&rsv_sug1=2&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&prefixsug=js&rsp=5&inputT=1525&rsv_sug4=2055
        // pathname 访问的路径

        console.log(window.location.pathname);//'/s'

        // search:获取传递给服务器参数  ?参数
        console.log(window.location.search);//?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&fenlei=256&rsv_pq=967f9b17000176db&rsv_t=c8252r5qJn130t3JXrOowYCr6Fdp2cw%2FEGDeHEm5InmBGS38vyGXCAIar5Q&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=3&rsv_sug1=2&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&prefixsug=js&rsp=5&inputT=1525&rsv_sug4=2055
    </script>
</body>

</html>

history

包含了历史记录的信息

forward(); 前进
back(); 后退
go(); 刷新默认值是0 可以省略表示刷新 1前进 -1后退

navigator

包含浏览器的详细信息

userAgent 用户信息
- navigator.userAgent.appVersion
isLine 是否在线是否有网有网true 没有false

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // navigator:包含浏览器的详细信息
        console.log(window.navigator);

        // userAgent 用户信息
        console.log(navigator.userAgent);
        // 兼容处理
        console.log(navigator.userAgent.appVersion);

        // onLine  是否在线  是否有网  有网true  没有false
        console.log(navigator.onLine);

    </script>
</body>

</html>

前端小臂猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS BOM

BOM(Browser Object Model)：浏览器对象模型window 系统提示框 alter(弹出内容); 弹窗 prompt(提示内容); 带有输入的用户提示框返回值：点击确定返回输入框的内容取消：返回null confirm(提示内容); 带有确定和取消用户提示框返回值：确定 ->true 取消->false open及close open(url,_self/blank,外观
复制链接

扫一扫