锐客网

  1. 首页 > it技术 > >

浏览器对象模型|浏览器对象模型 (BOM)

浏览器对象模型 (BOM) 浏览器对象模型（Browser Object Model (BOM)）
Window 尺寸 有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

其他 Window 方法 window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen window.screen对象在编写时可以不带上 window 这个前缀。
screen.availWidth - 可用的屏幕宽度该属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight - 可用的屏幕高度该属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

Window Location window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。 该对象在编写时可不使用 window 这个前缀，如：
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
Window Location Href location.href 属性返回当前页面的 URL。
Window Location Assign location.assign() 方法加载新的文档。
如：box2.innerHTML = window.location.assign('http://www.guiyinqingyuan.com');
Window History window.history 对象包含浏览器的历史。 该对象在编写时可不使用 window 这个前缀。
history.back() - 与在浏览器点击后退按钮相同history.back() 方法加载历史列表中的前一个 URL。
history.forward() - 与在浏览器中点击向前按钮相同history forward() 方法加载历史列表中的下一个 URL。

附：除了history.back()和history.forward() 还可以通过 history.go() 来实现前进和后退
//前进
function lia(){
history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}

//后退
function hua(){
history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}

Window Navigator （navigator 对象的信息具有误导性，不应该被用于检测浏览器版本） window.navigator 对象包含有关访问者浏览器的信息。 该对象在编写时可不使用 window 这个前缀。


注意：navigator 对象的信息具有误导性，navigator 数据可被浏览器使用者更改，一些浏览器对测试站点会识别错误，浏览器无法报告晚于浏览器发布的新操作系统
JavaScript 弹窗 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框window.alert() 方法可以不带上window对象，直接使用alert()方法。
确认框window.confirm() 方法可以不带上window对象，直接使用confirm()方法。
提示框window.prompt() 方法可以不带上window对象，直接使用prompt()方法。
JavaScript 计时事件javaScript 通过设定一个时间间隔之后来执行代码，我们称之为计时事件
在 JavaScritp 中使用计时事件的两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window 对象的两个方法。
setInterval() 方法 setInterval() 间隔指定的毫秒数不停地执行指定的代码
window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function），第二个参数间隔的毫秒数， 1000 毫秒是一秒。
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
// clearInterval点击停止
var hua = setInterval(function(){tu()}, 1000);
function tu(){
box.innerHTML = new Date().toLocaleTimeString();
}
btn1.onclick = function(){
clearInterval(hua);
}
setTimeout() 方法
setTimeout()的使用方法和setInterval() 方法差不多，区别在于setTimeout()使用一次之后就失效了，setInterval() 方法则是一直循环使用
// setTimeout() 方法执行一次后失效
var hermit = setTimeout(function(){lxlx()}, 5000);
function lxlx(){
box1.innerHTML = new Date().toLocaleTimeString() + '如果你在5秒之内没有点击阻止，我才能显示';
}
　clearTimeout() 方法
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。但是必须在setTimeout()方法执行之前点击，因为setTimeout()方法执行一次，之后就自动失效了
var hermit = setTimeout(function(){lxlx()}, 5000);
function lxlx(){
box1.innerHTML = new Date().toLocaleTimeString() + '如果你在5秒之内没有点击阻止，我才能显示';
}
btn2.onclick = function(){
clearTimeout(hermit);
}
JavaScript Cookie Cookie 用于存储 web 页面的用户信息，Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储，如：username = John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
使用 JavaScript 创建Cookie Cookie 用于存储 web 页面的用户信息。Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息"
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
创建 cookie，如：document.cookie="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=/";
读取 cookie，如: var x = document.cookie; document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;
修改 cookie，如：document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; 修改 cookie 类似于创建 cookie，将旧的 cookie 覆盖。
删除 cookie，如：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，删除时不必指定 cookie 的值。
Cookie 字符串 如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，那么数据是这样的：cookie1=value; cookie2=value;
// 设置cookie值
// cookie的名称为cname,值为cvalue,过期时间为exdays
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值
// cookie的名称为cname
// 创建一个文本变量用于检索指定 cookie :cname + "="
function getCookie(cname){
var name = cname + '=';
//使用分号来分割document.cookie字符串，
// 并将分割后的字符串数组赋值给 ca
var ca = document.cookie.split('; ');
for(var i = 0; i < ca.length; i++){ //循环 ca 数组
var c = ca[i].trim(); //去除前后空格
if(c.indexOf(name)==0){
return c.substring(name.length, c.length);
}
}
return ''; //如果没有找到 cookie, 返回 "" (空字符串)
}
//检测cookie的值
btn1.onclick = function(){
var username = getCookie('username');
if(username != ''){
alert('Welcome again' + username);
}else{
username = prompt('Please enter your name:', '');
if(username != '' && username != null){
setCookie('username', username,365);
}
}
}

【浏览器对象模型|浏览器对象模型 (BOM)】转载于:https://www.cnblogs.com/hermit-gyqy/p/10690873.html

    推荐阅读


    上一篇：站点的安全防范都是后端的职责（非也，Web前端安全同样不可忽视）

    下一篇：nodejs集成sqlite