JavaScript 浏览器BOM

2022/8/5 1:22:44

本文主要是介绍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()方法的函数代码

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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程