浏览器BOM的属性方法总结

1、window对象
所有浏览器都支持window对象。它表示浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。

2、window尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight ----浏览器窗口的内部高度(包括滚动条)
window.innerWidth ----浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight
document.documentElement.clientWidht

或者

document.body.clientHeight
document.body.clientWidht

兼容性写法 (涵盖所有浏览器)

var w = window.innerWidht || document.body.clientWidht||document.documentElement.clientWidth

var h = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight

其他window方法

window.open() //打开新窗口
window.close() //关闭当前窗口
window.moveTo() //调整当前窗口
window.resizeTo() //调整当前窗口的尺寸

2、window.screen 对象包含有光屏幕的信息

window.screen.availWidth //可用的屏幕宽度
window.screen.availHeight //可用的屏幕高度

3、Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
一些实例:

location.hostname //返回web主机的域名
location.pathname //返回当前页面的路径和文件名
location.port //返回web主机的端口
location.protocol //返回所使用的web协议(http:或https:)
location.href //属性返回当前页面的URL
location.assign() 方法加载新的文档

4、Window History
window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
一些方法:

history.back() //与在浏览器中点击后退按钮相同
history.forward() //与在浏览器中点击向前按钮相同

5、Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
window.navigator 对象在编写时可不使用 window 这个前缀。

navigator.appCodeName //浏览器代号
navigator.appName //浏览器名称
navigator.appVersion //浏览器版本
navigator.cookieEnabled //启用Cookies
navigator.platform //硬件平台
navigator.userAgent //用户代理
navigator.systemLanguage //用户代理语言

6、window弹窗
6.1、警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。

window.alert("sometext");

6.2、确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。

window.confirm("sometext");

6.3、提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

window.prompt("sometext","defaultvalue");

7、JavaScript 计时事件
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setInterval() //间隔指定的毫秒数不停地执行指定的代码
setTimeout() //在指定的毫秒数后执行指定代码
clearInterval() //方法用于停止 setInterval() 方法执行的函数代码。
clearTimeout() //方法用于停止执行setTimeout()方法的函数代码。

8、JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。

什么是 Cookie?
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时,他的名字可以记录在 cookie 中。
在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

8.1使用 JavaScript 创建Cookie
JavaScript可以使用document.cookies属性来创建、读取、以及删除cookies。
JavaScript 中,创建 cookie 如下所示:

document.cookies = "username = John Doe"

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

8.2使用 JavaScript 读取 Cookie

var x = document.cookie;
//document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;

8.3使用 JavaScript 修改 Cookie
在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

8.5使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当您删除时不必指定 cookie 的值。

//设置 cookie 值的函数
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取 cookie 值的函数
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
//检测 cookie 值的函数
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}
发布了87 篇原创文章 · 获赞 29 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/Hhjian524/article/details/104000232