JS浏览器BOM常见操作实例详解


Posted in Javascript onApril 27, 2020

本文实例讲述了JS浏览器BOM常见操作。分享给大家供大家参考,具体如下:

window尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度
 
 window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight
 
 document.documentElement.clientWidth

或者

document.documentElement.clientHeight
 
 document.documentElement.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

<script>
 var w=window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;
 var h=window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;
 x=document.getElementById("demo");
 x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
 </script>

 其他 Window 方法

window.open() - 打开新窗口
 
 window.close() - 关闭当前窗口
 
 window.moveTo() - 移动当前窗口
 
 window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

screen.availWidth - 可用的屏幕宽度
 
 screen.availHeight - 可用的屏幕高度

 Window Screen 可用宽度

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

Window Screen 可用高度

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

Window Location

location.hostname 返回 web 主机的域名
 
   location.pathname 返回当前页面的路径和文件名
 
   location.port 返回 web 主机的端口 (80 或 443)
 
   location.protocol 返回所使用的 web 协议(http:// 或 https://)
 
   location.href 属性返回当前页面的 URL。
 
   location.pathname 属性返回 URL 的路径名。
 
   location.assign() 方法加载新的文档。

Window History

history.back() - 与在浏览器点击后退按钮相同
 
   history.forward() - 与在浏览器中点击按钮向前相同

JavaScript Navigator

window.navigator 对象包含有关访问者浏览器的信息。

警告!!!

来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator 数据可被浏览器使用者更改

  • 一些浏览器对测试站点会识别错误

  • 浏览器无法报告晚于浏览器发布的新操作系统

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法

window.alert("sometext");

window.alert() 方法可以不带上window对象,直接使用alert()方法。

确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带上window对象,直接使用confirm()方法。

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不带上window对象,直接使用prompt()方法。

换行

弹窗使用 反斜杠 + "n"(\n) 来设置换行。

JavaScript 计时事件

通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
 
 setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()

setInterval() 第一个参数是函数(function)。第二个参数间隔的毫秒数

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:

myVar=setInterval("javascript function",milliseconds);

然后可以使用clearInterval() 方法来停止执行。

setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。

JavaScript Cookies

Cookies 用于存储 web 页面的用户信息。

什么是 Cookies?

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

  • 当用户访问 web 页面时,他的名字可以记录在 cookie 中。

  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储,如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

JavaScript 中,创建 cookie 如下所示:

document.cookie="username=John Doe";

还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookies:

var x = document.cookie;
 document.cookie 将以字符串的方式返回所有的 cookies,类型格式: cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie

在 JavaScript 中,修改 cookies 类似于创建 cookies,如下所示:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当您删除时不必指定 cookie 的值。

设置 cookie 值的函数

首先,我们创建一个函数用于存储访问者的名字:

//cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。
 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 值的函数

然后,我们创建一个函数用户返回指定 cookie 的值:

function getCookie(cname)
 {
 var name = cname + "=";//创建一个文本变量用于检索指定 cookie :cname + "="。
 var ca = document.cookie.split(';');//使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。
 //循环 ca 数组 (i=0;i<ca.length;i++),然后读取数组中的每个值,并去除前后空格 (c=ca[i].trim())。
 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);//如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。
  }
 return "";//如果没有找到 cookie, 返回 ""。
 }

检测 cookie 值的函数

最后,我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie,将显示一个问候信息。

如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

function checkCookie()
 {
 var username=getCookie("username");
 if (username!="")
  {
  alert("Welcome again " + username);
  }
 else
  {
  username = prompt("Please enter your name:","");
  if (username!="" && username!=null)
   {
   setCookie("username",username,365);
   }
  }
 }

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
React实现轮播效果
Aug 25 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
详解elementUI中input框无法输入的问题
Apr 27 #Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 #Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 #Javascript
You might like
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
跟老齐学Python之类的细节
2014/10/13 Python
python更改已存在excel文件的方法
2018/05/03 Python
python实现文本界面网络聊天室
2018/12/12 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
2014最新党员批评与自我批评材料
2014/09/24 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js