1、location 对象

location提供了与当前窗口中加载的文档有关的信息,还有一些导航功能。需要注意的是,window.location 和 document.location 引用的是同一个对象。

location 对象的属性:

属性名 例子 说明
hash "#content" 返回URL中的hash(#号后跟零或多个字符),如果没有hash,返回空字符串
host "www.baidu.com:8080" 返回一个URL的主机名和端口(如果有)
hostname "www.baidu.com" 返回URL的主机名
href "http:/www.baidu.com/xxx/?s=oo" 返回完整的URL
pathname "/WileCs/" 返回的URL中的目录和(或)文件名
port "8080" 返回一个URL服务器使用的端口号
protocol "http:" 返回一个URL协议,http或https
search "?q=javascript 返回一个URL的查询部分,以“?”开头

可以冲search中获取URL中的参数。

每次修改location的属性(hash除外),页面都会以新的URL重载。所以通常设置 location.href 来跳转页面。设置这些属性,浏览器的历史记录中就会生成一条新记录,所以用户可以点击浏览器的“后退”按钮都会导航到前一个页面。

方法:

1)  location.assign(url);   立即打开新URL并在浏览器历史中生成一条记录。同 location.href = url ;window.location = url;

2)  location.replace(url);  导航到URL,但不会再历史记录中生成新纪录,即 用户不能回到前一个页面。

3)location.reload([forceGet]); 重载页面。没有参数时,页面会以最有效的方式重载,如果页面没有变化,则从浏览器缓存中加载。传入 true ,则会强制从服务器加载。该语句最好放在最后一行。

2、navigator 对象 

navigator 一般用来识别客户端浏览器类型的,每个浏览器各有一个定义。

属性 说明
appCodeName 返回浏览器的代码名,通常是Mozilla,即使在非Mozilla浏览器中也是如此
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值
plugins 返回浏览器中安装的插件信息数组

3、screen 对象

Screen 对象包含有关客户端显示屏幕的信息。没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。

属性 说明
availHeight 返回屏幕的高度(不包括Windows任务栏)
availWidth 返回屏幕的宽度(不包括Windows任务栏)
colorDepth 返回目标设备或缓冲器上的调色板的比特深度
height 返回屏幕的总高度
pixelDepth 返回屏幕的颜色分辨率(每象素的位数)
width 返回屏幕的总宽度

4、history 对象

history 对象包含用户(在浏览器窗口中)访问过的 URL,历史记录,从窗口打开时算起。

history 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。每个浏览器窗口、每个标签页、每个框架,都有自己的 history

属性/方法 说明
length 返回历史列表中的网址数
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

go() 方法可以在历史记录中随意跳转。history.go(number|URL)

该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。

history.go("xxxx.com");  -->跳到最近的 “xxxx.com”页面

history.length 等于 0 ,表明这个页面是用户打开的第一个页面

BOM 对象--location、navigator、screen、history的更多相关文章

  1. JavaScript之BOM五大对象(window;location;navigator;screen;history)

    一.window 1.浏览器窗口与页面各部分尺寸 2.间歇调用与超时调用 setInterval(function,time(以毫秒计)) 返回:时间Id号(为clearInterval(timeId ...

  2. 《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象

    如果要在web中使用JAVASCRIPT,那么BOM(浏览器对象模型)毫无疑问是最重要的部分.BOM提供了很多对象,例如,window.location.navigator.screen.histor ...

  3. BOM对象——Location

    BOM对象--location <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

    DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...

  5. (转)浏览器对象window,history,location,navigator,screen

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

  6. JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)

    JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象) 一丶什么是BOM ​      B ...

  7. 【JavaScript】BOM对象——Window对象&History对象&Location 对象

    1.Window对象: 表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInterval 使用. setTimeout():它有一个返回值,主要是提供给 c ...

  8. Javascript进阶篇——浏览器对象—Location、Navigator、userAgent、screen对象

    Location对象location用于获取或设置窗体的URL,并且可以用于解析URL.语法: location.[属性|方法] location对象属性图示: location 对象属性: loca ...

  9. Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象

    screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...

随机推荐

  1. Eureka 客户端启动报错误 Cannot determine embedded database driver class for database type NONE

    用这种数据库配置就是死活连不上数据库 提示:Cannot determine embedded database driver class for database type NONE 解决方式: 启 ...

  2. 前端通过js-xlsx获取Excel完整数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. python中str的索引、切片

    1 a = "hello" 2 a1 = a[1] 3 a2 = a[0:2] 4 print(a1) 5 print(a2) 我们通过索引获取字符串中指定位数的字符 通过切片获取 ...

  4. workerman-todpole 执行流程(2)

    上一篇文章 workerman-todpole 执行流程(1),我们已经分析完了主进程的执行流程,这篇文章主要分析一下子进程的 run() 流程. 有必要提一下,在 run() 开始之前,其实针对角色 ...

  5. ndoejs处理编码的爬虫

    var express=require('express');var http=require('http');var cheerio=require('cheerio');var fs=requir ...

  6. tensorflow实战系列(一)

    最近开始整理一下tensorflow,准备出一个tensorflow实战系列,以飨读者. 学习一个深度学习框架,一般遵循这样的思路:数据如何读取,如如何从图片和标签数据中读出成tensorflow可以 ...

  7. fb 4.7英文版 修改字体大小

    windows-preferences-general-appearance-colors and fonts-basic-text font

  8. pycharm 直接删掉数据表之后,makemigration和migrate 之后,数据库中依然没有生成数据表的问题

    综合分析一下行程这个问题的原因: 在终端中运行 select * from django_migrations; 查看 提交的记录,如果你的表删掉了,记录还在,那么数据库会觉得,这个表依然是存在的,所 ...

  9. css:长度距离的一个计算函数calc

    .calc-example{ width: calc(100% - 100px);} 可用于宽度,高度,margin,padding等长度或距离的计算 减号两边必须留一个空格

  10. CSS COLOR

    CSS COLOR Color Review We've completed our extensive tour of the colors in CSS! Let's review the key ...