js关于BOM操作的知识整理

这次给大家带来js关于bom操作的知识整理,js中的bom操作注意事项有哪些,下面就是实战案例,一起来看一下。

一、什么是BOM?

BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

二、关于BOM知识的思维导图

1.png

三、主流浏览器的介绍

浏览器内核主要指的是浏览器的渲染引擎,2013 年以前,代表有 Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及 Presto(opera)。2013 年,谷歌开始研发 blink 引擎,chrome 28 以后开始使用,而 opera 则放弃了自主研发的 Presto 引擎,投入谷歌怀抱,和谷歌一起研发 blink 引擎,国内各种 chrome系的浏览器(360、UC、QQ、2345 等等)也纷纷放弃 webkit,投入 blink 的怀抱。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。

四、BOM对象

window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;

document 对象,文档对象;

location 对象,浏览器当前URL信息;

navigator 对象,浏览器本身信息;

screen 对象,客户端屏幕信息;

history 对象,浏览器访问历史信息;

1)、Window对象:BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

window对象常用方法有

弹框类的方法。前面省略window

alert(‘提示信息’)
confirm(“确认信息”)
prompt(“弹出输入框”)
open(“url地址”,“打开的方式(可以是-self或-black)”,“新窗口的大小”)注:如果url为空,则默认打开一个空白页面,如果打开方式为空,则默认为新窗口方式打开页面。返回值为:返回新打开窗口的window对象

close()  关闭当前的网页。 注:存在兼容性问题:FF:禁止设置关闭浏览器的代码

Chrome:默认直接关闭

IE:询问用户

window.moveTo() – 移动当前窗口
window.resizeTo() – 调整当前窗口的尺寸

定时器,清除定时器。

setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行

clearTimeout/clearInterval(定时器名称) 清除定时器

2)、location对象

window.location对象:用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

location.herf = ‘url地址’
hash 返回#号后面的字符串,不包含散列,则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回?号后面的所有值。
port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串

portocol 返回页面使用的协议。 http:或https:

3)、navigator对象

window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

navigator.platform:操作系统类型;

navigator.userAgent:浏览器设定的User-Agent字符串。

navigator.appName:浏览器名称;

navigator.appVersion:浏览器版本;

navigator.language:浏览器设置的语言;

userAgent是最常用的属性,用来完成浏览器判断。

if(window.navigator.userAgent.indexOf('MSIE')!=-1){         alert('我是IE');     }else{         alert('我不是IE');     }

登录后复制

4)、screen对象

window.screen 对象包含有关用户屏幕的信息。

 screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。                                         screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

登录后复制

5)、history对象

window.history 对象包含浏览器的历史。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。 history.back() - 加载历史列表中的前一个 URL。返回上一页。 history.forward() - 加载历史列表中的下一个 URL。返回下一页。                                                                                              go(“参数”) -1表示上一页,1表示下一页。

登录后复制

综合以上,页面跳转的方法有:

1、window.location.href = '你所要跳转到的页面';  2、window.open('你所要跳转到的页面’);  3、window.history.back(-1):返回上一页  4、window.history.go(-1/1):返回上一页或下一页五、  5、history.go("baidu.com");

登录后复制

 

五、窗口尺寸与大小

可视区尺寸:  document.documentElement.clientWidth                                                                                                                             document.documentElement.clientHeight滚动条滚动距离: document.documentElement.clientScrollTop                                                                                                                          document.documentElement.clientScrollLeft

登录后复制

                                                                                                                    存在兼容性问题(Chrome与其它浏览器不同),解决办法如下

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;  var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;

登录后复制

内容高/宽:元素.scrollHeight/scrollWidth

当一个时间发生时鼠标到页面可视区的距离:clientX/clientY

六、系统对话框

alert()、confirm()和prompt()       alert("Hello world!");       /*   判断用户点击了OK还是Cancel,可以检查confirm()方法返回的布尔值:true表示单击了OK,false表示单击了Cancel或单击了右上角的X按钮。    */       if (confirm("Are you sure?")) {           alert("I'm so glad you're sure! ");       } else {            alert("I'm sorry to hear you're not sure. ");       }       /*   prompt()方法用来生成一个"提示"框,用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ,还会显示一个文本输入域,用来输入文本内容。该方法接收两个参数:要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)    */       var result = prompt("What is your name? ", "");        if (result !== null) {        alert("Welcome, " + result);       }    

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

Spring的配置

Spring的MVC配置

以上就是js关于BOM操作的知识整理的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784537.html

(0)
上一篇 2025年3月8日 17:07:22
下一篇 2025年3月8日 17:07:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue.js的2.0后台系统实战案例

    这次给大家带来vue.js的2.0后台系统实战案例,vue.js2.0后台系统实战的注意事项有哪些,下面就是实战案例,一起来看一下。 朋友最近要做个自己用的OA来练练手(PS,那逼一直想创业),找我和他一起做,由于最近时间有限,就帮他写个框…

    编程技术 2025年3月8日
    200
  • Vuejs webp支持图片的插件开发

    这次给大家带来vuejs webp支持图片的插件开发,vuejs webp插件开发的注意事项有哪些,下面就是实战案例,一起来看一下。 本人已经使用vue.js半年多了,在做一些Html5页面的时候发现很多页面都是图片组成的,如果能有效的压缩…

    2025年3月8日
    200
  • JavaScript实现禁止微信浏览器下拉回弹效果

    这篇文章主要为大家详细介绍了javascript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习javascript的价值,对javascript感兴趣的小伙伴们可以参考一下本篇文章 本文实例为大家分享了JavaScript禁止微信浏…

    编程技术 2025年3月8日
    200
  • Angularjs如何实现mvvm式选项卡?案列+代码

    我们知道,选项卡是现代web网页中最常用的效果之一,这次给大家带来angularjs如何实现mvvm式选项卡?案列+代码,下面就是实战案例,一起来看一下。 本文重点是用angularjs这个非常火mvvm框架,实现选项卡效果。在此之前,先搬…

    2025年3月8日
    200
  • Angularjs的promise对象详解

    这次给大家带来angularjs的promise对象详解,使用angularjs的promise对象时注意事项有哪些,下面就是实战案例,一起来看一下。 promise是什么?要了解它,需要先从我们面临的问题开始讲起。在操作ajax异步请求时…

    编程技术 2025年3月8日
    200
  • JS可以截取video的标签视频缩略图吗?

    这次给大家带来js可以截取video的标签视频缩略图吗?,js截取video的标签视频缩略图的注意事项有哪些,下面就是实战案例,一起来看一下。 JavaScript截取video标签视频缩略图,前几天做个小项目以瀑布流加载MP4视频,一个页…

    编程技术 2025年3月8日
    200
  • Javascript制作仿苹果触摸屏效果

    这次给大家带来javascript制作仿苹果触摸屏效果,javascript制作仿苹果触摸屏效果的注意事项有哪些,下面就是实战案例,一起来看一下。 Javascript制作仿苹果小白点直接引入代码到页面即可代码有部分冗余的地方,有兴趣的小伙…

    编程技术 2025年3月8日
    200
  • 用来下载图片的javascript脚本

    这次给大家带来用来下载图片的javascript脚本,使用下载图片的javascript脚本的注意事项有哪些,下面就是实战案例,一起来看一下。 功能说明:      本人在浏览图片网站的时候常常发现一个问题就是想复制图片到本地时常常另存为,…

    编程技术 2025年3月8日
    200
  • AngularJs操作Cookies实例分享

    cookie可以说是一种客户端技术,程序把用户的一些信息以cookie的形式写给用户各自的浏览器。说白了就是网站为了辨别用户身份而储存在用户电脑上的数据。 很多购物网站的购物车功能、论坛自动登录功能都是靠cookie实现。 对cookies…

    2025年3月8日
    200
  • JS中的变量作用域深入解析

    变量的作用域有两种:全局变量和局部变量。本文主要和大家分享js中的变量作用域深入解析,希望能帮助到大家。 全局变量 最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的:    var n=10;  function f…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论