使用JavaScript的BOM的注意事项有哪些

发布时间:2021-01-18 11:32:52 作者:小新
来源:亿速云 阅读:133

这篇文章将为大家详细讲解有关使用JavaScript的BOM的注意事项有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

location对象
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些
导航的功能,它既是window对象的属性,也是document对象的属性。
语法:location.href
功能:返回当前加载页面的完整URL
说明:location.href与window.location.href等价
语法:location.hash
功能:返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串
语法:location.host
功能:返回服务器名称和端口号(如果有)
语法:locationhostname
功能:返回不带端口号的服务器名称。
语法:location.pathname
功能:返回URL中的目录和(或)文件名。
语法:location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串。
语法:location.protocol
功能:返回页面使用的协议
语法:location.search
功能:返回URL的查询字符串。这个字符串以问号开头。
语法:location.replace(url)
功能:重新定向URL
说明:使用location.replace不会再历时记录中生成新纪录。
语法:location.reload()
功能:重新加载当前显示的页面。
说明:
location.reload()有肯从缓冲中加载
location.reload(true)从服务器重新加载
history对象
history对象保存了用户在浏览器中访问页面的历史记录
语法:history.back()
功能:回到历史记录的上一步
说明:相当于使用了history.go(-1)
语法:location.forward()
功能:回到历时记录的下一步
说明:相当于使用了history.go(1)
语法:history.go(-n)
功能:回到历时记录的前n步
语法:history.go(n)
功能:回到历史记录的后n步
navigator对象
useragent:用来识别浏览器名称,版本,引擎以及操作系统等信息的内容。
screen对象
语法:screen.availWidth
功能:返回可用的屏幕宽度
语法:screen.availHeight
功能:返回可用的屏幕高度

location01.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box1{
            height: 900px;
            background: #ccc;
        }
        .box2{
            height: 500px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div></div>
    <input type="button" id="btn" value="返回顶部">
    <script>
        btn.onclick = function () {
            location.hash = '#box1';
            console.log(location.hash);
        }
        console.log(location.href);
        console.log(location.hash);
        console.log(location.host);
        console.log(location.hostname);
        console.log(location.pathname);
        console.log(location.port);
        console.log(location.protocol);
        console.log(location.search);
    </script>
</body>
</html>

location02.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="刷新" id="btn">
    <script>
        /*setTimeout(function () {
            //location.href = "https://www.baidu.com";
            //window.location = "https://www.baidu.com";
            location.replace("https://www.baidu.com");
        },1000);*/
        document.getElementById('btn').onclick = function () {
            location.reload();
            //location.reload(true);
        }
    </script>
</body>
</html>

history01.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="example_2.html">example_2.html</a>
    <input type="button" value="后退" id="btn1">
    <input type="button" value="前进" id="btn2">
    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        btn1.onclick = function () {
            //history.back();
            history.go(-1);
        }
        btn2.onclick = function () {
            history.forward()
            //history.go(1);
        }
    </script>
</body>
</html>

navigator.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        function getBrowser() {
            var explorer = navigator.userAgent.toLowerCase();
            var browser = "";
            if (explorer.indexOf("msie")>-1) {
                browser = "IE";
            } else if (explorer.indexOf("chrome")>-1){
                browser = 'Chrome';
            } else {
                browser = 'asdf';
            }
            return browser;
        }
        var msg = "您用的是" +getBrowser()+'浏览器';
        console.log(msg);
    </script>
</body>
</html>

screen.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(screen.availWidth);
        console.log(screen.availHeight);
        console.log(window.innerWidth);
        console.log(window.innerHeight);
    </script>
</body>
</html>

关于“使用JavaScript的BOM的注意事项有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. JavaScript BOM Cookie 的使用
  2. JavaScript中BOM有什么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript bom

上一篇:JavaScript中arguments函数有什么用

下一篇:javascript中递归指的是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》