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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
ES6数组与对象的解构赋值详解
Jun 14 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js function定义函数使用心得
2010/04/15 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python格式化css文件的方法
2015/03/10 Python
python处理大数字的方法
2015/05/27 Python
python自动zip压缩目录的方法
2015/06/28 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
小学运动会口号
2014/06/07 职场文书
单位委托书格式范本
2014/09/29 职场文书
小学四年级学生评语
2014/12/26 职场文书
违纪检讨书范文
2015/01/27 职场文书
律政俏佳人观后感
2015/06/09 职场文书
晚会开幕词范文
2016/03/04 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL