从零开始学 Web 之 BOM(一)BOM的概念,一些BOM对象

一、BOM

1、BOM的概念

BOM(Browser Object Model):浏览器对象模型。

在浏览器中的一些操作都可以使用 BOM 的方法进行编程处理。

比如:刷新浏览器、前进、后退、在地址栏输入 URL 等。

2、BOM 顶级对象

BOM 的顶级对象是:window

window 是浏览器的顶级对象,当调用 window 下的属性和方法时,可以省略 window。

注意: 1、window 下的一个特殊属性:window.name,所以不要轻易定义 name 变量,会导致 window.name 被修改。 2、top 等同于 windows。

3、系统对话框

window.alert();
window.prompt();
window.confirm(); // 两个按钮,分别返回 true 和 false。

以上对话框都不建议使用。 1、弹框时页面无法加载; 2、各个浏览器的样式不相同,且样式不可自定义。

4、页面加载对象

提出问题:

我们知道,如果将 script 标签放在 head 里面的话,页面加载的时候是先加载的 script 标签,之后才加载 body 里面的标签。如果 script 特别大的话,就很影响用户体验。

解决办法:

1、将 script 标签放在 body 最后。

2、使用 window.onload 事件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                alert("haha");
            }
        }
    </script>
</head>
<body>
<input type="button" value="BUTTON" id="btn">
</body>

1、如果不写 window.onload 的话,执行到 document.getElementById("btn") 会报错,因为程序是从上至下执行。 2、window.onload 事件会在页面加载完毕(页面中所有内容、标签、属性以及外部引入的 js文件)时触发。 3、window.onload 可以省略 window。

window.onunload = function () {
    alert("yes");
}

onunload: 页面关闭后才触发的事件

window.onbeforeunload = function () {
    alert("yes");
}

onbeforeunload:在页面关闭之前触发的事件

5、location 对象(地址栏)

学习一个对象主要是学习它里面的属性和方法。

5.1、属性

console.log(window.location.hash); // 地址栏上#及后面的内容
console.log(window.location.host); // localhost:63342 ---- 主机名及端口号
console.log(window.location.hostname); // localhost  ---- 主机名
console.log(window.location.port); //63342  ---- 端口号
console.log(window.location.pathname);// /JS/images/location.html --- 相对路径
console.log(window.location.protocol);// http:   --- 协议
console.log(window.location.search);//?_ijt=28855sggj8kcffva8q9bhc1eh0  --- 搜索的内容

5.2、方法

document.getElementById("btn").onclick = function () {
    location.href = "http://fengdaoting.com";
    location.assign("http://fengdaoting.com");
    location.reload();
    location.replace("http://fengdaoting.com");
};

location.hreflocation.assign(): 设置跳转的页面地址,这两个属性和方法作用相同,并且都保存跳转前的地址(在浏览器中可以点击返回按钮)。 location.reload(): 刷新页面 location.replace(): 设置跳转的页面地址,但是不保存跳转前的地址。

6、history 对象

6.1、方法

window.history.forward(); // 前进
window.history.back() // 后退
window.history.go(number);  // number为正,前进;为负,后退。

7、navigator 对象

7.1、属性

window.navigator.platform; // 判断浏览器所在的系统平台
// win32
window.navigator.userAgent; // 判断浏览器的类型,是谷歌火狐还是IE
// chrome 下结果:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

Angular2 之 结构型指令几个概念

两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化...

922
来自专栏菜鸟计划

vue组件详解(五)——组件高级用法

一、递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。 示例如下: <div id="app19"> ...

4466
来自专栏十月梦想

js定时器叠加处理方案

setInterval(function(),1000);设置一个定时器给定时器一个变量名字,如: var timer=setInterval(function...

2043
来自专栏小程序之家

如何使用小程序视图容器组件

在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

6.5K2
来自专栏不止是前端

Vue:父子组件信息传递

3828
来自专栏angularejs学习篇

asp.net中ScriptManager自带Ajax与jQuery事件冲突

问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突。通过在...

991
来自专栏前端知识分享

第78天:jQuery事件总结(一)

     现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。

852
来自专栏liulun

riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

前文回顾 riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 访问DOM元素 你可以通过this.ref...

2817
来自专栏GreenLeaves

Vue.js系列之二Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1、Vue实例...

2338
来自专栏从零开始学自动化测试

Selenium2+python自动化28-table定位

前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。 一、认识table 1.首先看下...

2917

扫码关注云+社区

领取腾讯云代金券