javascript浏览器---学习笔记

青旅半醒 2022-09-22 01:19 134阅读 0赞

**1.浏览器对象**

**window对象**不但充当全局作用域，而且表示浏览器窗口。  
window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部高度和宽度。内部宽高是指出去菜单栏 ，工具栏，边框等占位元素周，用于显示网页的净宽高。  
兼容性：IE<=8不支持

对应的，还有一个outWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

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

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

注意navigator的信息可以还让你容易的被用户修改，所以javascript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本：

var width;
    if (getIEVersion(navigator.userAgent) < 9) {
        width = document.body.clientWidth;
    } else {
        width = window.innerWidth;
    }

这样的判断不准确，也很难维护代码。正确的方法是

var width = window.innerWidth || document.body.clientWidth;

**screen对象**表示屏幕的信息，常用的属性有  
screen.width:屏幕宽度，以像素为单位  
screen.height:屏幕的高顿，以像素为单位  
screen.colorDepth:返回颜色位数，如8,16,24

location对象表示当前页面的URL信息

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

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对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

要查找DOM树的某个节点，需要从document对象开始查找，最常用的查找是根据 ID 和Tag Name

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

Cookie是由服务器发送的key-value标识符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户登陆后，服务器发送一个Cookie给浏览器。此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分用户。

Cookie还可以存储网站的一些设置，例如页面的显示语言等。

javascript可以通过document.cookie读取到当前页面的Cookie:

document.cookie; // 'v=123; remember=true; prefer=zh'

由于javascript能读取页面的Cookie，而用户的登陆信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在html页面中引入第三方的javascript代码是允许的。如果引入的第三方javascript中存在恶意代码，则网站将直接获取到网站用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly,设定了httpOnly的Cookie将不能被javascript读取。

**history对象**保存了浏览器的历史记录，javascript可以调用history对象的back()或forward(),相当于用户点击了浏览器的后退或前进。

**DOM操作：**

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。