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. samba企业级实战应用详解-技术流ken

    1.简介 Samba是一套使用SMB(Server Message Block)协议的应用程序, 通过支持这个协议, Samba允许Linux服务器与Windows系统之间进行通信,使跨平台的互访成为 ...

  2. SpringBoot之前端文件管理

    WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库,比如jQuery.Bootstrap等. (1)添加js或者css库 pom.xml <dependency& ...

  3. vsCode 列选择、列选中、选中列、选中多列（转载）

    VSCode列选择快捷键 来源 https://blog.csdn.net/Luyanc/article/details/80502069 VSCode列选择快捷键:Alt+Shift+左键 来一张效 ...

  4. python特色_字典，元组，列表

    一.前言: 1.许多编程语言的基本数据类型都大同小异,而字典,元组,列表是python编程语言的一大特色,能够非常简单的完成很多功能,学习好字典,元组,列表能够为以后大数据,批处理......提供很多 ...

  5. js对HTML字符转义与反转义

    注意: 在编写html时,经常需要转义,才能正常显示在页面上. 并且,还可以防止xss. 解决方案: 一, 使用正则: 使用正则转码: var value = document.getElementB ...

  6. 微信小程序 table 简单测试

    <view class='AutoTable'> <view id='AutoTableItem'> <block wx:for="{{array}}" ...

  7. 2018-08-13 Head First OO分析设计一书略读与例子中文化

    注: 此笔记仅为个人学习此教程的布局和材料组织之用. 如有兴趣请自行详阅. 第一章是以吉他商店的存货系统作例子. 第二章设计有狗洞的门. 第三章对第二章基础上, 更改需求后对应设计. 第四章继续改进此 ...

  8. HTML笔记（适合新手入门）

    HTML Web 标准构成 Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合. 主要包括结构(Structure).表现(Presentation)和行为(Behavior ...

  9. IBM沃森会成为第一个被抛弃的AI技术吗？

    作者|William Vorhies 译者|姚佳灵 编辑|Debra 导读:IBM 的沃森问答机(Question Answering Machine,简称 QAM),因 2011 年参加综艺节目&l ...

  10. 中国最强AI超级服务器问世，每秒提供AI计算2000万亿次

    https://mp.weixin.qq.com/s/1EVczHp11OJ4GEjeE3z5cA 业内唯一以“AI计算”为核心的人工智能大会昨天发布了一份重要报告. 9月12日,<中国AI计算 ...