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. [转]Docker和Rancher的安装与基本使用

    本文转自:https://blog.csdn.net/wangshouhan/article/details/80405672 一.Docker1.CentOS下Docker安装 安装 $ yum - ...

  2. JavaScript匿名函数入门。

    1.第一种匿名函数的使用:简单的调用 var f=function(){ return 'Hello'; };   //匿名函数没法调用,只能赋值,所以作为赋值语句后面得加分号 var result= ...

  3. 【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate

    JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...

  4. lambda List实现某列去重的解决方案采用扩展方法

    public class CommonEqualityComparer<T, V> : IEqualityComparer<T> { private Func<T, V& ...

  5. npm ERR! Cannot read property 'path' of null

    npm错误: 错误信息如下: $ sudo npm install -g bean-sdk sudo: npm: command not found $ npm install -g bean-sdk ...

  6. 阿里云oss,简单上传

    描述:oss比较方便,省去了自己搭建文件服务器的时间,价格比较便宜,下面是java基于oss的简单上传代码 a.添加maven依赖 <dependency> <groupId> ...

  7. WORLD F4快捷重复上一步操作

    只需做一次动作,后面就直接按F4即可重复上一次操作.

  8. 亲测:LNMP环境下,解决项目缓冲慢、502以及配置https的问题

    在做的项目在nginx下访问缓冲时间过长,明显比apache下访问蛮11倍有余, 解决办法: 1增加nginx的upstream,其中upstream中为php-cgi的地址: 2利用nginx作为反 ...

  9. Spring之AOP的注解配置

    配置过程可以简单的分为3步: 1,业务类配置 在业务类前加入,将业务类交由Spring管理 @Component("s") 这个表示,这个业务类的Bean名字为 s . 2,将切点 ...

  10. BZOJ3453: tyvj 1858 XLkxc(拉格朗日插值)

    题意 题目链接 Sol 把式子拆开,就是求这个东西 \[\sum_{i = 0} ^n \sum_{j = 1}^{a + id} \sum_{x =1}^j x^k \pmod P\] 那么设\(f ...