• Bom


    bom是浏览器提供的api,也就是运行环境的工具
    可以理解为因为有html页面所有有dom,因为运行在浏览器上所以有bom

    那浏览器提供了什么呢?

    • window对象
    • location对象
    • history对象
    • navigtor对象
    • 弹窗对象
    • 计时器
    • cookie
    • Storage对象
    • XMLHttpRequest构造函数
    • 最新还有个缓存的api还没普及

    下面复制上常用代码,来自大佬的博客

    window对象
    最高级的对象,下面所有的内容都是window的一部分

    //关闭窗口
    window.close();
    //关闭窗口(a标签就是的href就是调用这个方法的)
    window.open("xxx.com","_blank")
    //可以使状态栏的文本暂时改变
    window.status
    //默认的状态栏信息,可在用户离开当前页面前一直改变文本  
    window.defaultStatus
    
    

    弹窗对象
    window可以不写

    //弹出一个具有OK按钮的系统消息框,显示指定的文本
    window.alert("message");  
    //弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
    window.confirm("Are you sure?");  
    //提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
    window.prompt("What's your name?", "Default");  
    

    计时器对象
    window可以不写

    //设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
    window.setTimeout("alert('xxx')", 1000);  
    //取消还未执行的暂停,将暂停ID传递给它
    window.clearTimeout("ID");  
    //无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
    window.setInterval(function(){}, 1000);  
    //取消时间间隔,将间隔ID传递给它
    window.clearInterval("ID");  
    

    history对象
    当前标签的浏览历史,window可以不写

    //访问浏览器窗口的历史,负数为后退,正数为前进
    window.history.go(-1); 
    //同上
    window.history.back();  
    //同上
    window.history.forward();  
    //可以查看历史中的页面数
    window.history.length  
    // 修改历史记录
    window.history.pushState 
    // 修改历史记录替换当前的url
    window.history.replaceState 
    

    document对象
    是唯一一个既属于BOM又属于DOM的对象,window可以不写

    //获取最后一次修改页面的日期的字符串表示
    window.document.lastModified  
    //用于跟踪用户从哪里链接过来的
    window.document.referrer  
    //获取当前页面的标题,可读写
    window.document.title  
    //获取当前页面的URL,可读写
    window.document.URL  
    //访问页面中所有的锚
    window.document.anchors[0] 或 document.anchors["anchName"] 
    //访问页面中所有的表单
    window.document.forms[0] 或 document.forms["formName"]  
    // 访问页面中所有的图像
    window.document.images[0] 或 document.images["imgName"]  
    //访问页面中所有的链接
    window.document.links [0] 或 document.links["linkName"]  
    //访问页面中所有的Applet
    window.document.applets [0] 或 document.applets["appletName"]  
    //访问页面中所有的嵌入式对象
    window.document.embeds [0] 或 document.embeds["embedName"]  
    //将字符串插入到调用它们的位置
    window.document.write() 或 document.writeln();  
    

    location对象
    载入窗口的URL,window可以不写

    //当前载入页面的完整URL
    window.location.href  
    //URL中使用的协议,即双斜杠之前的部分,如http
    window.location.portocol  
    //服务器的名字,如www.wrox.com
    window.location.host  
    //通常等于host,有时会省略前面的www
    window.location.hostname  
    //URL声明的请求的端口,默认情况下,大多数URL没有端口信息,如8080
    window.location.port  
    //URL中主机名后的部分,如/pictures/index.htm
    window.location.pathname  
    //执行GET请求的URL中的问号后的部分,又称查询字符串,如?param=xxxx
    window.location.search  
    //如果URL包含#,返回该符号之后的内容,如#anchor1
    window.location.hash  
    //同location.href,新地址都会被加到浏览器的历史栈中
    window.location.assign("http:www.baidu.com");  
    //同assign(),但新地址不会被加到浏览器的历史栈中,不能通过back和forward访问
    window.location.replace("http:www.baidu.com");  
    //重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false
    window.location.reload(true | false);  
    

    cookie对象
    短时间储存

    image.png

    F12的第9个按钮Application这个窗口里除了前面说过的查看相关的所有文件外,cookie也在这里看,cookie是name-value的形式存在的,cookie没有同源策略,同个ip地址的cookie能通用,所以cookie常被用来作为父子iframe之间的通信

    //cookie的操作
    设置cookie: document.cookie = 'key=value';
    获取cookie: document.cookie;
    删除cookie: document.cookie = "key=value;max-age=0";
    设置max-age存储期限: document.cookie = "key=value;max-age=1000"; // 1000秒
    

    Storage对象
    localStorage(本地存储)生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
    sessionStorage(会话存储)生命周期为当前窗口或标签页,一旦窗口或标签页被关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

    image.png

    window.localStorage
    window.localStorage.setItem("key", "value");
    window.localStorage.getItem("key");
    window.localStorage.removeItem("key");
    // 上面的localStorage改成sessionStorage一样
    

    navigator对象
    在检测浏览器及操作系统上非常有用,window可以不写

    //官方浏览器名的字符串表示
    window.navigator.appName  
    //浏览器版本信息的字符串表示
    window.navigator.appVersion  
    //如果启用cookie返回true,否则返回false
    window.navigator.cookieEnabled  
    //如果启用java返回true,否则返回false
    window.navigator.javaEnabled  
    //浏览器所在计算机平台的字符串表示
    window.navigator.platform  
    //安装在浏览器中的插件数组
    window.navigator.plugins  
    //如果启用了数据污点返回true,否则返回false
    window.navigator.taintEnabled  
    //用户代理头的字符串表示
    window.navigator.userAgent  
    

    screen对象
    用于获取某些关于用户屏幕的信息,window可以不写

    //屏幕的宽度与高度,以像素计
    window.screen.width/window.height  
    //窗口可以使用的屏幕的宽度和高度,以像素计
    window.screen.availWidth/screen.availHeight  
    //用户表示颜色的位数,大多数系统采用32位
    window.screen.colorDepth  
    //滚动条
    window.moveTo(0, 0);
    //填充用户的屏幕
    window.resizeTo(screen.availWidth, screen.availHeight);  
    

    XMLHttpRequest构造函数
    是一个非常重要的数据请求的api,window可以不写
    这个api改变了前端的生存环境,下一篇单独讲他的使用

    window.XMLHttpRequest
    
  • 相关阅读:
    2014 年美国程序员薪资调查
    新加坡移民生活:想出都出不来了!
    mysql命令行参数
    甲骨文创始人埃里森的10大混蛋行为:曾翻微软垃圾堆
    为什么我要称自己为Javascript程序员
    原生JavaScript练习——弹出层
    Leetcode 344 Reverse String 字符串处理
    安装 Autoconf 2.69版
    Leetcode 28 Implement strStr()
    Leetcode 67 Add Binary 大数加法+字符串处理
  • 原文地址:https://www.cnblogs.com/pengdt/p/12037549.html
Copyright © 2020-2023  润新知