JavaScript -- 时光流逝(十):Screen 对象、History 对象、Location 对象

JavaScript -- 知识点回顾篇(十):Screen 对象、History 对象、Location 对象

1. Screen 对象

  1.1 Screen 对象的属性

        (1) availHeight: 返回屏幕的高度(不包括Windows任务栏)
        (2) availWidth: 返回屏幕的宽度(不包括Windows任务栏)
        (3) colorDepth: 返回目标设备或缓冲器上的调色板的比特深度
        (4) height: 返回屏幕的总高度
        (5) pixelDepth: 返回屏幕的颜色分辨率(每像素的位数)
        (6) width: 返回屏幕的总宽度

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    document.write("可用高度: " + screen.availHeight);
    document.write("<br/>可用宽度: " + screen.availWidth);
    document.write("<br/>颜色深度: " + screen.colorDepth);
    document.write("<br/>总高度: " + screen.height);
    document.write("<br/>总宽度: " + screen.width);
    document.write("<br/>颜色分辨率: " + screen.pixelDepth);
</script>
</head>
<body>
</body>
</html>

 

2. History 对象

  2.1 History 对象的属性

   (1) length: 返回历史列表中的网址数

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        document.write("历史列表中URL的数量: " + history.length);
    </script>
    </head>
    <body>
    </body>
    </html>

 

  2.2 History 对象的方法

   (1) back(): 加载 history 列表中的前一个 URL
   (2) forward(): 加载 history 列表中的下一个 URL
   (3) go(): 加载 history 列表中的某个具体页面

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
            function my_back(){
                window.history.back()
            }
            function my_forward(){
                window.history.forward()
            }
            function my_go(){
                window.history.go(-2)
            }
    </script>
    </head>
    <body>
        <input type="button" value="back()方法" onclick="my_back()">
        <input type="button" value="forward()方法" onclick="my_forward()">
        <input type="button" value="go()方法" onclick="my_go()">
    </body>
    </html>

 

3. Location 对象

  3.1 Location 对象的属性

        (1) hash: 返回一个URL的锚部分
        (2) host: 返回一个URL的主机名和端口
        (3) hostname: 返回URL的主机名
        (4) href: 返回完整的URL
        (5) pathname: 返回的URL路径名。
        (6) port: 返回一个URL服务器使用的端口号
        (7) protocol: 返回一个URL协议
        (8) search: 返回一个URL的查询部分

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        document.write(location.hash);
        document.write('<br/>'+location.host);
        document.write('<br/>'+location.hostname);
        document.write('<br/>'+location.href);
        document.write('<br/>'+location.pathname);
        document.write('<br/>'+location.port);
        document.write('<br/>'+location.protocol);
        document.write('<br/>'+location.search);
    </script>
    </head>
    <body>
    </body>
    </html>

 

  3.2 Location 对象的方法

        (1) assign(): 载入一个新的文档
        (2) reload(): 重新载入当前文档
        (3) replace(): 用新的文档替换当前文档

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function my_assign(){
            window.location.assign("https://www.baidu.com")
        }
        function my_reload(){
            location.reload()
        }
        function my_replace(){
            window.location.replace("https://www.hao123.com")
        }
    </script>
    </head>
    <body>
        <input type="button" value="assign()方法" onclick="my_assign()">
        <input type="button" value="reload()方法" onclick="my_reload()">
        <input type="button" value="replace()方法" onclick="my_replace()">
    </body>
    </html>

 

posted on 2018-11-06 10:39  在代码的世界里游走  阅读(331)  评论(0编辑  收藏  举报