[JavaScript] (Day-16) - 浏览器对象

If you don't travel around, you'd think this is the world. 如果你不走出去,你就会认为这就是世界。

JavaScript可以获取浏览器提供的很多对象,并进行操作。

window

window对象表示浏览器窗口,而且充当全局作用域
window对象有innerWidthinnerHeight属性,可以获取浏览器窗口的内部宽度和高度

window.innerWidth; // 窗口内部的宽度
window.innerHeight; // 窗口内部的高度

对应的,还有一个outerWidthouterHeight属性,可以获取浏览器窗口的整个宽高。

window.innerWidth; // 窗口整体的宽度
window.innerHeight; // 窗口整体的高度

navigator

navigator对象表示浏览器的信息,最常用的属性包括:

  • navigator.appName:浏览器名称;
  • navigator.appVersion:浏览器版本;
  • navigator.language:浏览器设置的语言;
  • navigator.platform:操作系统类型;
  • navigator.userAgent:浏览器设定的User-Agent字符串。

navigator的信息可以很容易地被用户修改,所以 JavaScript 读取的值不一定是正确的


screen

screen对象表示屏幕的信息,常用的属性有:

  • screen.width:屏幕宽度,以像素为单位;
  • screen.height:屏幕高度,以像素为单位;
  • screen.colorDepth:返回颜色位数,如8、16、24。

location

location对象表示当前页面的URL信息。例如,一个完整的URL:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。
要获得URL各个部分的值,可以这么写:

  • location.protocol; // 'http'
  • location.host; // 'www.example.com'
  • location.port; // '8080'
  • location.pathname; // '/path/index.html'
  • location.search; // '?a=1&b=2'
  • location.hash; // 'TOP'

要加载一个新页面,可以调用location.assign()。如果要重新加载当前页面,调用location.reload()方法非常方便。


document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

documenttitle属性是从HTML文档中的<title>xxx</title>读取的,但是可以动态改变

document.title = "努力学习JavaScript!";

浏览器窗口标题将变化为 “努力学习JavaScript!”

document对象提供的getElementById()getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:

var menu = document.getElementById('menu');
var drink = document.getElementsByTagName('dt');

document对象还有一个cookie属性,可以获取当前页面的Cookie


history

history对象保存了浏览器的历史记录,JavaScript 可以调用history 对象的back()forward (),相当于用户点击了浏览器的“后退”“前进”按钮

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容