JavaScript 浏览器BOM

本文主要是介绍JavaScript 浏览器BOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

浏览器对象模型（BOM）使得JavaScript能够和浏览器对话。

JS Window Location相关属性

1. location.hostname: 返回Web主机的域名
2. location.pathname: 返回当前页面的路径和文件名称
3. location.port: 返回Web主机的端口
4. location.protocol: 返回所使用的web协议(eg: http、https）
5. window.location.href: 返回(当前页面的)整个URL

JS Window History: 包含浏览器的访问历史

window.history对象在编写的时候不可使用window这个前缀

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

history.go()方法实现【向前】【后退】【刷新】功能

go(args)中args标示跳转页面的个数 

- history.go(1): 前进一个页面
- history.go(-1): 后退一个页面
- history.go(0): 刷新所在页面

JS Window Navigator

window.navigator对象存储浏览器信息

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

JavaScript 弹窗

JavaScript中创建三种消息框：警告框、确认框、提示框

• 警告框

window.alert("sometext");

• 确认框
  确认框用于验证是否接受用户操作
  当确认框弹出的时候，用户点击“确认”或“取消”来确定用户操作。
  当点击“确认”，确认框返回，当点击“取消”，确认框返回false

var res = window.confirm("按下按钮");
if(res == true){
	x = "你按下了确定按钮!";
}else {
	x = "你按下了取消按钮!";
}

• 提示框
  提示框用于提示用户在进入页面之前输入某个值
  当提示框出现，用户需要输入某个值，然后点击确认或取消才能继续操作。
  如果用户点击确认，则返回值为输入的值，如果用户点击取消则返回值为null。

var username = window.prompt("请输入你的名字", "Harry Potter");
if(username != null && person != ""){
	x = "Hi " + username + " ! How you feel?";
}

JavaScript计时事件

使用JavaScript可以在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行（计时事件），两个关键方法是：

• window.setInterval("js func", millisec) - 【间隔执行】间隔指定的毫秒数不停地执行指定的代码。
• window.setTimeout("js func", millisec) - 【延时执行】在指定的毫秒数后执行指定代码。
• window.clearInterval("js func", millisec) - 停止执行setInterval()方法执行的函数代码
• window.clearTimeout("js func", timeoutVarialbe) - 停止执行setTimeout()方法的函数代码

JavaScript Cookie

Cookie：存储Web页面的用户信息

什么是Cookie？

Cookie是一些数据，存储在电脑的文本文件中。
客户端向浏览器发送Web页面时，连接关闭后不会记录用户的信息。
Cookie作用： 解决如果记录客户端的用户信息

• 用户访问Web页面时，他的名字记录在Cookie中
• 用户下一次访问该页面时，从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 != "") {
      window.alert("欢迎" + user + " 再次访问 ");
    } else {
       user = prompt("请输入你的名字：");
       if(user != "" && user != null){
          setCookie("username", user, 30);
       }
    }
}

这篇关于JavaScript 浏览器BOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！