对BOM的总结

参考:JavaScript半知半解 TG著

BOM对象

Window对象是客户端JavaScript程序的全局对象。

Window对象使得JavaScript与浏览器进行交互。

所有的JavaScript全局对象,函数以及变量均自动成为window对象的属性和方法。

Document对象也是window对象的成员。

Window对象方法与浏览器交互的方法:

计时器

SetTimeOut()和SetInterval(),两个参数,一个是重复执行的代码,另外一个是重复的毫秒数,需要注意的是,这两个函数都会返回一个值,类似计时器ID,分别可以用clearTimeOut()与clearInterval()来取消执行。

注意:如果以0毫秒的超时时间来调用setTimeout(),那么指定的函数不会立刻执行。 相反,会把它放到队列中,等到前面处

于等待状态的事件处理程序全部执行完成后,再“立即”调用它。

浏览器的定位与导航

Window对象的location属性引用了Location对象,与document中的location属性引用的对象相同。它表示窗口中当前显示的文档的URL,并提供了方法来载入新的文档。

Location的功用是可以解析当前URL,分离出相关的信息,作为相关属性:当我们需要网址的时候:window.herf属性可以获取,同样的属性包括协议、主机、域名、端口。。等等根据需要查询文档。

需要注意的是以上属性都是可写的,在更改之后会按照我们更改的信息载入一个新的文档。

以上是属性部分,下面是location对象的一些方法:

 

location.assign() :使窗口载入并显示指定的URL中的文档。

location.replace() :和assign()方法类似,但它在载入新文档之前会从浏览历史中把当前文档删除。 这样“后退”按钮就不会把浏览器带回到原始文档。

location.reload() :重新载入当前文档,可传入一个布尔值为参数,默认false。 如果为true,则优先从服务器重新加载;否则优先从本地缓存中重新加载。

纯粹的片断标识符是相对URL的一种类型,它不会让浏览器载入新文档,而是使浏览器滚动到文档的某个位置。

注意:#top标识符是个特殊值:如果文档中没有元素的ID是“top”,它会让浏览器滚动到文档开始处。location = '#top'; //跳转到文档的顶部

浏览历史

Window对象的history属性引用的是该窗口的History对象:History对象是用来把窗口浏览历史用文档和文档状态列表的形式

表示。

History对象的length属性表示浏览历史表中的元素数量。 比如你在当前窗口访问了三个不同的网址,那么history.length就等于3

相关方法:

back():移动到上一个访问页面,等同于浏览器的后退键。

forward():移动到下一个访问页面,等同于浏览器的前进键。

go():接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward(),go(-1)相当于back()。

如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是默默的失败

history.go(0)相当于刷新当前页面。

TUDO

浏览器相关信息

 

Window对象的navigator属性引用的是包含浏览器产商和版本信息的Navigator对象

属性:

appName:Web浏览器的全称

appVersion:此属性通常以数字开始,并跟着包含浏览器产商和版本信息的详细字符串。 字符串前面的数字通常是4.0或5.0,表示它是第4或第5代兼容的浏览器。

userAgent:属性返回浏览器的User-Agent字符串,标示浏览器的厂商和版本信息。 它包含了appVersion中的所有信息:

用此属性可以判断是否为手机浏览器,在哪个平台。//利用返回的数据根据正则表达式来判断。

Platform:返回操作系统信息

onLine:返回浏览器是否链接到网络

Geolocation:返回一个Geolocation对象,包含用户地理位置信息。

方法:

javaEnabled()javaEnabled方法返回一个布尔值,表示浏览器是否能运行Java Applet小程序。

cookieEnable()cookieEnabled方法返回一个布尔值,表示浏览器是否能储存Cookie。

浏览器屏幕相关信息

Window对象的screen属性引用的是Screen对象,它提供有关窗口显示的大小和可用的颜色数量的信息。

属性:

Width:整个屏幕宽度

Height:整个屏幕高度

availHeight,availWidth:返回屏幕可用的高度和宽度,单位为像素。 它们的值为屏幕的实际大小减去操作系统某些功能占据的空间,比如系统的任务栏

 

colorDepth:返回屏幕的颜色深度,一般为16(表示16-bit)或24(表示24-bit)。

对话框:。

alert() :向用户显示一条消息并等待用户关闭对话框。

confirm() :同样显示一条消息,要求用户单击“确认”或“取消”按钮,并返回一个布尔值。

prompt() :同样显示一条消息,等待用户输入字符串,并返回这个字符串。

这三个方法都具有堵塞效应,一旦弹出对话框,整个页面就是暂停执行,等待用户做出反应。

错误处理:

Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它,并把错误信息输出到浏览器的JavaScript控制台上。

多窗口和多窗体:

由于网页可以使用 <iframe> 嵌套多个网页,因此一个网页之中会形成多个窗口。 另一情况是,子网页之中又嵌入别的网页,形成多级窗口。 每个窗口的Window对象都是独立的,互不干扰。

浏览器提供了一些特殊变量,用来返回其他窗口。

top:顶层窗口, 即最上层的那个窗口

parent:父窗口

self:当前窗口, 即自身

下面的代码可以判断当前窗口是否是顶层窗口

window.top === window.self

与这些变量对应, 浏览器还提供一些特殊的窗口名, 供open方法、 `<a>`标签、 `<form>`标签等引用。

_top:顶层窗口

_parent:父窗口

_blank:新窗口

打开和关闭窗口:

使用Window对象的open()方法可以打开一个新的浏览器窗口。 Window.open()载入指定的URL到新的或已存在的窗口中,并

返回代表那个窗口的Window对象。

open方法一共可以接受四个参数。

第一个参数:字符串,表示新窗口的网址。 如果省略,默认网址就是 about:blank 。

第二个参数:字符串,表示新窗口的名字。 如果该名字的窗口已经存在,则跳到该窗口,不再新建窗口。 如果省略,就默认

使用_blank,表示新建一个没有名字的窗口。

第三个参数:字符串,内容为逗号分隔的键值对,表示新窗口的参数,比如有没有提示栏、 工具条等等。 如果省略,则默认

打开一个完整UI的新窗口。

第四个参数:布尔值,表示第一个参数指定的网址,是否应该替换history对象之中的当前网址记录,默认值为false。 显然,

这个参数只有在第二个参数指向已经存在的窗口时,才有意义。

window.close方法用于关闭当前窗口,一般用来关闭window.open方法新建的窗口。

modal.close();

窗体:

窗体是通过 <iframe> 元素创建的,我们可以像获取其他元素一样,获取一个表示 <iframe> 的元素对象,同时,

<iframe> 元素有 contentWindow 属性,引用该窗体的Window对象。

<iframe id='f'></iframe>

var f = document.getElementById('f');

var win = f.contentWindow; //子窗体的Window对象

var doc = f.contentDocument; //等同于f.contentWindow.document

//获取子窗体的变量和属性

f.funciton()

F.title

 

转载于:https://www.cnblogs.com/lumaoxin/p/7010747.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot增删改查接口实例

前言 增删改查是后端最基本的技能。下面我就带领小伙伴们通过一个简单的示例来讲解SpringBoot的增删改查。Spring Boot框架层次从上至下可分为5层&#xff1a;分别为View层&#xff0c;Controller层&#xff0c;Service层&#xff0c;Mapper层&#xff0c;Model层 1. View层&a…

前端学习(2459):账户设置

# 八、账户设置## 创建页面组件并配置路由1、创建 src/views/account/index.vue 组件html <template><div><el-form ref"form" :model"form" label-width"80px"><el-form-item label"用户头像"><el-upload…

C# 依据KeyEventArgs与组合键字符串相互转换

/// 快捷键相关的类/// </summary>public static class HotKeyInfo{/// <summary>/// 依据KeyEventArgs生成组合键字符串/// </summary>/// <param name"e"></param>/// <returns></returns>public static string GetStri…

lpc2000 filash utility 程序烧写工具_单片机烧录程序的次数

单片机是可编程器件&#xff0c;开发者把程序写好、编译完之后&#xff0c;需要烧录到单片机中&#xff0c;单片机才能按照开发者的逻辑去执行。在这个烧录的过程中需要用到专用的烧录工具。比如51单片机的USB/TTL、STM单片机的STlink等。使用过单片机开发板的同学都清楚&#…

工作总结21:阅读代码之axios

/*基础接口请求地址*/ const apiBaseUrl "http://xxxxxxxx";/*创建instance实例*/ const service axios.create({baseURL: apiBaseUrl,timeout: 10000 }); 读懂该接口 这边是设置的基础url

工作总结22:拦截器

//设置拦截器 拦截 // request interceptor service.interceptors.request.use(config > {const token Vue.ls.get(ACCESS_TOKEN);// if (token) {// config.headers["X-Access-Token"] token; // 让每个请求携带自定义 token 请根据实际情况自行修改// }retu…

ug建模文本怎么竖着_入门到成为UG编程高手,这些步骤你不得不了解

入门到成为UG编程高手&#xff0c;这些步骤你不得不了解加工中心是数控设备的一种&#xff0c;日常的作业离不开数控加工&#xff0c;编程是要害。我们常见的编程软件有不少&#xff0c;mastercam、cimatron、ug、powermill、hypermill等等许多不同的软件&#xff0c;不同的编程…

工作23:vue---封装request做数据请求

import axios from axios// 创建一个axios实例 const service axios.create({// headers: {// content-type: application/json;charsetUTF-8,// token: one // },baseURL: http://dianphp.fyz.com,withCredentials: true,timeout: 5000 })// 添加请求拦截器 service.inte…

华为手机记事本导出_深夜浅谈怎样用一部手机做电影解说?

小编从兴趣而至&#xff0c;到开始做第一部电影解说已经过去半个月了&#xff0c;作品也发布了三部&#xff0c;全程没用过一次电脑&#xff0c;自己之前也没接触过专业的软件&#xff0c;什么PR&#xff0c;AU之类的一概不懂&#xff0c;全程一部手机&#xff0c;只用剪映&…

MySQL多项模糊查询

最近有个需求&#xff0c;就是要根据搜索框里面的关键字&#xff0c;找到符合条件的数据。 如果是单个条件的话&#xff0c;其实就是一个普通的select语句。 但是需求是这个关键字&#xff0c;要在id&#xff0c;desc&#xff0c;step等多个字段模糊查找。 然后最直观的一个思路…

工作24:封装请求

import { axios } from "./axios";export { axios };export function httpAction(url, parameter, method) {return axios({url: url,method: method,data: parameter}); } /*封装系统需要的post请求 第一个参数传入url地址 第二个传入数据参数*/ export function po…

保存的图数据丢失_锡柴自主刷写和备份共享数据文件使用介绍

刷写功能锡柴自主 ECU刷写可以恢复损坏的数据或是新ECU刷上相应车型的数据注意事项确认车辆电瓶电量充足&#xff0c;平板电脑电量充足。发动机不启动。车辆处于刹车状态。建议使用USB线进行刷写可以提高刷写速度。部分车上其它系统对刷写有影响&#xff0c;可拆下来在车下接线…

设置MySQL自动增长从某个指定的数开始

设置一个自增字段&#xff0c;必须为primary key。 设置uid以1001开始自增长。 CREATE TABLE user (uid int(11) NOT NULL PRIMARY KEY,username varchar(20) DEFAULT NULL,password varchar(40) DEFAULT NULL,email varchar(20) DEFAULT NULL,phone varchar(15) DEFAULT NULL,…

用户思维模型,围绕用户核心四大模块,拉新、养熟、成交、裂变循环的效果...

用户思维模型&#xff0c;围绕用户核心四大模块&#xff0c;拉新、养熟、成交、裂变循环的效果 用户思维模型1、拉新越勾引人的诱惑设计&#xff0c;借力软文、好友、大V、媒体等推广的方法来获得源源不断高质量的粉丝&#xff0c;给予别人有价值的东西才能心甘情愿的成为你的粉…

德标螺纹规格对照表_抚顺船用外螺纹铜减压阀带NK船检证书

抚顺船用外螺纹铜减压阀带NK船检证书产品详情&#xff1a;品牌&#xff1a;“上海上循”牌(上海上循船用阀门制造有限公司)具体产品型号及详情&#xff0c;请致电咨询&#xff01;(V同号)QQ&#xff1a;1633370867材质&#xff1a;铸铁&#xff0c;铸钢&#xff0c;不锈钢&…

工作27:组件封装

<!--封装部门选择的插件 需要的组件--> <template><el-select :value"value" placeholder"请选择所属栏目" change"handleChange"><!--注意用户的返回值--><el-option v-for"value in column" :label&quo…

codeblocks如何导入项目_T3如何利用系统工具导入导出复制存货档案

问题现象&#xff1a;如何把旧账的存货档案复制到新建一个公司帐&#xff0c;如何在系统工具中操作&#xff1f;解决方案&#xff1a;1、点击电脑左下角“开始”-“程序”-“T3系列管理软件”-“T3”-“系统工具”&#xff0c;在此注册控制台界面输入(用户名、密码、选择帐套、…

2017-06-19 (cp mkdir rm 运行级别及修改)

mkdir 用于创建目录 mkdir -p 递归创建目录 mkdir -p /linux/linux rm 用于删除文件与目录 rm -r 删除目录 -f 强制删除 &#xff08;一般情况下 rf 组合使用&#xff09; cp 用于复制文件或者目录 cp [选项] [原文件或者目录] [目标目录] cp -r 复制目录 -p 连带…