JavaScript学习的第二十天

一、BOM的screen对象

window.screen对象 包含有关用户屏幕的信息

console.log(window.screen);

http://127.0.0.1:5500

availLeft: 1920

availTop: 0

availWidth: 1920 可用宽度

availHeight: 1032 可以高度

colorDepth: 24 色彩深度

pixelDepth: 24 色彩分辨率    

width: 1920 屏幕的宽

height: 1080 屏幕的高

px 像素 图像元素 picture element

二、BOM的navigator对象

window.navigator对象 包含有感访问者浏览器的信息

console.log(window.navigator);

appCodeName  返回浏览器的代码名

appName  返回浏览器的名称

appVersion  返回浏览器的平台和版本号

cookieEnabled  返回是否启用cookie

language  返回浏览器语言

languages  返回代理语言

platform  返回浏览器运行的操作平台

product  浏览器内核

userAgent  返回由客户机发送服务器的user-agent头部的值  用户代理

三、BOM的history对象 

window.history对象 包含浏览器的历史

console.log(window.history);

属性

length  返回历史记录/列表中的网址数

scrollRestoration  允许应用程序在历史导航上显式的设置默认滚动回复行为

auto  恢复用户已滚动到的页面上的位置

manual  未还原上页的位置

window.history.scrollRestoration="manual";

state:null  状态

方法

back()  加载history列表中的前一个URL  后退

forword()  加载history列表中的下一个URL  前进

go(number)  加载history列表中的某个具体页面  -1 1 2 3 4

    aBnts[1].onclick=function(){
        window.history.forward()
    }
    aBnts[2].onclick=function(){
        window.history.go(2)
    }

四、BOM的history对象state相关

window.history对象 包含浏览器的历史

console.log(window.history);

属性

length  返回历史记录/列表中的网址数

scrollRestoration  允许应用程序在历史导航上显式的设置默认滚动回复行为

auto  恢复用户已滚动到的页面上的位置

manual  未还原上页的位置

state:null  状态

方法

pushState(stateObj,title,URL)  向当前浏览器的history中添加一个状态

    aBnts[3].onclick=function(){
        window.history.pushState({page:1},"标题01","index.html")
    }

replaceState(stateObj,title,URL)  修改浏览器当前history的实体状态

    aBnts[4].onclick=function(){
        window.history.replaceState({page:2},"标题02","index.html")
    }

五、BOM的location对象

window.location对象   用于获取当前页面的地址(URL)，并把浏览器重定向到新的页面

console.log(window.location);

href  获取或设置完整的URL

console.log(decodeURI(window.location.href));
//http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/05BOM的location对象.html
document.getElementsByTagName("button")[0].onclick=function(){
    window.location.href="index.html"
}

href: "http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/05BOM的location对象.html"

http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/01BOM的screen对象.html

http://127.0.0.1:5500/JavaScript/DOM/0505/03事件捕获.html

protocol 返回URL的协议http(超文本传输协议)https(加密) file(本地文件) ftp(文件传输协议)

protocol: "http:"

hostname  返回主机名  域名(网址)  ip地址  

hostname: "127.0.0.1"

port  返回一个URL服务器使用的端口号

port: "5500"

host  返回主机名加端口号

host: "127.0.0.1:5500"

源  返回一个URL的协议,主机名,端口号  

origin: "http://127.0.0.1:5500"

同源策略

pathname  返回URL的路径名    资源在当前服务器上的地址

pathname: "/JavaScript/BOM/BOM中的对象/05BOM的location对象.html"

hash  返回URL的锚的部分  #后面的部分（包含#）

hash: ""

search  返回URL的查询部分  ?后面的部分(包含?)

search: ""

https://detail.tmall.com/item.htm?id=670078399035&spm=a21bo.jianhua/evo255811b326289.201876.12.5af911d9tfCikL&scm=1007.34127.211940.0&pvid=b9ec14ad-64c1-491b-a1fa-1a2d737219bd

https://detail.tmall.com/item.htm?id=668504272466&spm=a21bo.jianhua/evo255811b326289.201876.13.5af911d9tfCikL&scm=1007.34127.211940.0&pvid=b9ec14ad-64c1-491b-a1fa-1a2d737219bd&sku_properties=20509:28383