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. SHELL脚本--shell数组基础

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 数组和变量的区别是:变量在内存中占用的空间是离散的,数组在内存 ...

  2. 南大算法设计与分析课程OJ答案代码（5）--割点与桥和任务调度问题

    问题 A: 割点与桥 时间限制: 1 Sec  内存限制: 5 MB提交: 475  解决: 34提交 状态 算法问答 题目描述 给出一个无向连通图,找到所有的割点和桥 输入 第一行:点的个数,如果点 ...

  3. [转]php 图片验证码生成 前后台验证

    本文转自:https://www.cnblogs.com/xiaoyezi/p/3541195.html 自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一 ...

  4. C#窗体加载和控件加载不同步导致控件闪烁

    窗体加载和控件加载不同步导致的控件闪烁现象:// 代码块加在父窗体中的任意位置,解决窗体加载和控件加载不同步导致的控件闪烁问题        protected override CreatePara ...

  5. linux内核里的字符串转换 ,链表操作常用函数(转)

    1.对双向链表的具体操作如下: list_add ———向链表添加一个条目 list_add_tail ———添加一个条目到链表尾部 __list_del_entry ———从链表中删除相应的条目 l ...

  6. Java_Queue接口

    Queue接口 1.英文 a)         Queue 队列 b)         Deque ,Double ender queue缩写,双向队列 2.Queue接口 除了基本的 Collect ...

  7. Java 数组声明的几种方式

    Java数组定义声明的几种方法: 1. 类型名称[] 变量名=new 类型名称[length]; 2.类型名称[] 变量名={?,?,?}; 3.类型名称[] 变量名=new 类型名称[]{?,?,? ...

  8. MyBatis：CRUD功能

    在前面已经自动生成了mapper和pojo,接下来我们实现mybatis的CRUD功能,先新建service.controller层的方法. 这里的sid是一个开源的id生成类,写完后,我们还需要在启 ...

  9. Java IO（2）阻塞式输入输出（BIO）

    在上文中<Java IO(1)基础知识——字节与字符>了解到了什么是字节和字符,主要是为了对Java IO中有关字节流和字符流有一个更好的了解. 本文所述的输出输出指的是Java中传统的I ...

  10. javascript浅拷贝深拷贝详解

    一.浅拷贝 浅拷贝在现实中最常见的表现在赋值上面,例如 <!DOCTYPE html> <html lang="en"> <head> < ...