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>

JavaScript -- 时光流逝（十）：Screen 对象、History 对象、Location 对象的更多相关文章

  1. JavaScript -- 时光流逝（十三）：DOM -- Console 对象

    JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...

  2. JavaScript -- 时光流逝（十一）：DOM -- Document 对象

    JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...

  3. JavaScript -- 时光流逝（十二）：DOM -- Element 对象

    JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...

  4. JavaScript -- 时光流逝（九）：Window 对象、Navigator 对象

    JavaScript -- 知识点回顾篇(九):Window 对象.Navigator 对象 1. Window 对象 1.1 Window 对象的属性 (1) closed: 返回窗口是否已被关闭. ...

  5. JavaScript -- 时光流逝（五）：js中的 Date 对象的方法

    JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...

  6. JS浏览器对象：window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  7. JavaScript -- 时光流逝（六）：js中的正则表达式 -- RegExp 对象

    JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义      查找以八进制数 规定的字符.     查找以十六进制数 规定 ...

  8. JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法

    JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...

  9. JavaScript -- 时光流逝（三）：js中的 String 对象的方法

    JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

随机推荐

  1. python语法风格

    这里只给出其它文章里不适合出现部分语法风格. python有几种类型的复合语句:if.for.while.def.class.try/except.with/as等.这些复合类型的语句在编写时,要遵循 ...

  2. 安装LoadRunner时提示缺少vc2005_sp1_with_atl_fix_redist解决方案

    操作系统重装后,安装LoadRunner11时,会报缺少vc2005_sp1_with_atl_fix_redist错误,类似下图所示: LR自动安装失败,在网上下载此组件安装后依然提示此信息,最终解 ...

  3. 【golang-GUI开发】qt之signal和slot（二）

    上一篇文章里我们详细介绍了signal的用法. 今天我们将介绍slot的使用.在qt中slot和signal十分相像,这次我们将实现一个能显示16进制数字的SpinBox,它继承自QSpinbox并重 ...

  4. 从零开始学安全(十九)●PHP数组函数

    $temp= array(1,2,3,,,,) 创建一个数组赋值给temp $id=range(1,6,2);     成长值   1到6  跨度为2  就是3个长度数组 也可以是字符“a” &quo ...

  5. js异步编程终级解决方案 async/await

      在最新的ES7(ES2017)中提出的前端异步特性:async.await. async.await是什么 async顾名思义是“异步”的意思,async用于声明一个函数是异步的.而await从字 ...

  6. 8张图让你一步步看清 async/await 和 promise 的执行顺序

    摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...

  7. JavaScript机器学习之线性回归

    译者按: AI时代,不会机器学习的JavaScript开发者不是好的前端工程师. 原文: Machine Learning with JavaScript : Part 1 译者: Fundebug ...

  8. 四个O(n^2)级别的排序性能测试

    测试环境为DEV-C++,并且选择排序,插入排序,冒泡排序,均为优化后的,若想了解具体优化过程,请参照:https://blog.csdn.net/qq_40164152 测试用例: #ifndef ...

  9. bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...

  10. jQuery 练习：tab 切换

    实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...