JavaScript 浏览器BOM

2022-08-04 18:32:45 阅读：429 来源： 互联网

标签：浏览器 JavaScript 用户 window BOM var navigator 页面

浏览器对象模型（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()方法的函数代码

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,用户,window,BOM,var,navigator,页面
来源： https://www.cnblogs.com/openmind-ink/p/16551573.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9