- 浏览: 495894 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
Window Screen
window.screen 对象包含有关用户屏幕的信息。
一些属性:
screen.availWidth - 可用的屏幕宽度(属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。)
screen.availHeight - 可用的屏幕高度(属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。)
Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL。
location.assign() 方法加载新的文档。
实例:
<script>
document.write(location.href);
</script>
以上代码输出为:
http://www.w3school.com.cn/js/js_window_location.asp
location.assign 与 location.replace的区别
window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的url,
当前页面会转为新页面内容,可以点击后退返回上一个页面。
window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,
前后两个页面共用一个窗口,所以是没有后退返回上一页的。
Window History
history.back() - 与在浏览器点击后退按钮相同(加载历史列表中的前一个 URL。)
history.forward() - 与在浏览器中点击按钮向前相同(加载历史列表中的下一个 URL。)
Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
JavaScript 消息框
在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert("文本")
确认框
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("文本")
实例:
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
提示框
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值")
实例:
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好!" + name + " 今天过得怎么样?")
}
}
</script>
JavaScript 计时
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,
而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用
实例: (无穷循环)
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
clearTimeout()
语法
clearTimeout(setTimeout_variable) //setTimeout_variable就是创建时的定时器引用(变量)
实例:
function stopCount()
{
clearTimeout(t)
}
</script>
JavaScript Cookies
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。
你可以使用 JavaScript 来创建和取回 cookie 的值。
cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。
document.cookie = "name=value;expires=date;path=path"
document.cookie = "username=Darren;path=/;domain=qq.com"
创建和存储 cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
读取cookies
function getCookie(c_name)
{
if (document.cookie.length>0) //检查 document.cookie 对象中是否存有 cookie
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
设置cookie的有效期
在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。
document.cookie = "name=value;expires=date"
参考原文:http://www.w3school.com.cn/js
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
Window Screen
window.screen 对象包含有关用户屏幕的信息。
一些属性:
screen.availWidth - 可用的屏幕宽度(属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。)
screen.availHeight - 可用的屏幕高度(属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。)
Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL。
location.assign() 方法加载新的文档。
实例:
<script>
document.write(location.href);
</script>
以上代码输出为:
http://www.w3school.com.cn/js/js_window_location.asp
location.assign 与 location.replace的区别
window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的url,
当前页面会转为新页面内容,可以点击后退返回上一个页面。
window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,
前后两个页面共用一个窗口,所以是没有后退返回上一页的。
Window History
history.back() - 与在浏览器点击后退按钮相同(加载历史列表中的前一个 URL。)
history.forward() - 与在浏览器中点击按钮向前相同(加载历史列表中的下一个 URL。)
Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
JavaScript 消息框
在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert("文本")
确认框
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("文本")
实例:
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
提示框
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值")
实例:
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好!" + name + " 今天过得怎么样?")
}
}
</script>
JavaScript 计时
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,
而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用
实例: (无穷循环)
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
clearTimeout()
语法
clearTimeout(setTimeout_variable) //setTimeout_variable就是创建时的定时器引用(变量)
实例:
function stopCount()
{
clearTimeout(t)
}
</script>
JavaScript Cookies
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。
你可以使用 JavaScript 来创建和取回 cookie 的值。
cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。
document.cookie = "name=value;expires=date;path=path"
document.cookie = "username=Darren;path=/;domain=qq.com"
创建和存储 cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
读取cookies
function getCookie(c_name)
{
if (document.cookie.length>0) //检查 document.cookie 对象中是否存有 cookie
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
设置cookie的有效期
在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。
document.cookie = "name=value;expires=date"
参考原文:http://www.w3school.com.cn/js
发表评论
-
定时调用函数功能实现
2021-06-11 10:26 1105<html> <head> & ... -
uniApiJs
2021-06-08 18:04 0//获取当前的地理位置、速度 function getLoca ... -
百度人脸识别
2021-05-21 16:11 362package com.gaojinsoft.htwy.y20 ... -
点击DIV触发上传文件的方法
2021-05-20 14:11 1198<div Style="float:left ... -
前端格式化工具与检测工具选择与使用
2021-05-10 20:26 719//工具安装前的准备与 ... -
indexedDb TEST
2021-03-24 08:36 507<!DOCTYPE html> <html& ... -
defineProperty Array push 监听
2020-10-31 15:16 464<!DOCTYPE html> <html ... -
weuiJsLayer.js
2020-07-24 09:56 263var weuiJsAlterMap = {}; f ... -
dataViewCommonJs
2020-05-09 17:00 357// var _elementIdToDataMap={} ... -
editorconfig配置
2020-03-28 20:36 462# https://editorconfig.org root ... -
commonJs
2020-03-26 21:25 361//本包使用需要先引入jquery //获取数组中的重复元素 ... -
setFormData
2019-12-20 22:30 0function setFormData(selector,d ... -
高德地图获取地址
2019-09-11 14:42 502高德帐号 135704744 <!doctype ... -
前端实现从剪贴板中获取数据
2019-05-16 14:01 1469//绑定在了body上,也可以绑定在其他可用元素行,但是不是所 ... -
js prototype原理与使用
2018-08-14 15:59 771js prototype原理与使用 prototype 使您 ... -
JS过滤树数据
2018-07-02 16:45 1018<!DOCTYPE html> <html ... -
javascript匿名函数与闭包
2016-09-27 14:10 430javascript匿名函数与闭包 ... -
JavaScript 作用域和作用域链
2016-09-27 09:08 516JavaScript 作用域和作用域链 JavaScrip ... -
Javascript函数
2016-09-28 15:00 500Javascript函数 定义函数 使用function关 ... -
Javascript执行步骤与顺序
2016-09-26 01:09 409Javascript执行步骤与顺序 1.JavaScript ...
相关推荐
JavaScript Window – 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准。 由于现代浏览器已经...
JavaScript浏览器对象模型(BOM,Browser Object Model)是JavaScript在Web开发中用于操作浏览器特性的核心部分。它不依赖于HTML文档对象模型(DOM),而是提供了与浏览器交互的一系列对象,如Window、Navigator、...
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准。 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的...
本文实例讲述了JavaScript 浏览器对象模型BOM原理与常见用法。分享给大家供大家参考,具体如下: 什么是BOM BOM:Browser Object Model,浏览器对象模型 从上图也可以看出: window对象是BOM的顶层(核心)对象,...
可用于学生,教师的JavaScript基础教程 JS中的事件处理方式 常用的JS事件 BOM-浏览器对象模型 window对象 window对象的子对象 我会不定期的上传新资源,欢迎各位关注我,获取更多的资源
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 1. open方法 语法格式: window.open(URL,窗口名称,窗口风格) 功能:打开...
浏览器对象模型的顶层对象是 window 对象,该对象代表了浏览器窗口。window 对象的子对象包括 document 对象、Frames 数组、History 对象、Location 对象、Navigate 对象和 Screen 对象等。Document 对象代表浏览器...
【第四章 浏览器对象模型BOM】 Browser Object Model(BOM)是JavaScript与浏览器交互的核心机制,允许开发者操控浏览器的各种功能。虽然BOM没有官方标准,但现代浏览器已经形成了事实上的统一标准。BOM的主要功能...
JavaScript学习手册十六主要聚焦在浏览器对象模型(Browser Object Model,简称BOM)这一主题,它是Web前端开发中的重要组成部分。BOM允许JavaScript与浏览器进行交互,控制窗口、导航、历史记录、时间等特性,提供...
在JavaScript编程中,浏览器对象构成了一个复杂的模型,允许开发者与用户的浏览器进行交互,提供了一系列方法和属性来操作页面元素和用户行为。本篇将详细介绍这些关键的浏览器对象。 一、对象(Object) 在...
- **浏览器对象模型(BOM)** 提供了与浏览器交互的对象,比如`Navigator`、`Screen`、`Window`等,这些对象与网页内容无关,但能操控浏览器行为。 - **文档对象模型(DOM)** 是W3C制定的标准,允许程序和脚本...
本文实例讲述了JavaScript浏览器对象模型BOM。分享给大家供大家参考,具体如下: window对象位于BOM层次结构的最顶层。它包含了一些非常重要的子对象,包括location,navigator,document,screen,history。...
"Slide-BOM: 浏览器对象模型(BOM)的网页幻灯片" 是一个关于Web开发的主题,特别是聚焦在JavaScript中的浏览器对象模型(Browser Object Model)。"滑动炸弹"可能是指一种动态效果或者交互设计,其中幻灯片以滑动方式...
JavaScript作为Web开发中不可或缺的一部分,通过其内置的浏览器对象模型(Browser Object Model, BOM)和文档对象模型(Document Object Model, DOM),提供了与浏览器交互、操作网页元素的能力。本文将详细介绍几个...
3. **浏览器对象**:例如`window`、`location`、`history`和`navigator`等,用于访问和控制浏览器的各种功能。 4. **文档对象**:如`document`、`images`、`form`等,用于操作文档中的各种元素。 #### DOM与BOM的...
为了能够操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就是“文档对象模型”。这些对象的组织类似一个树型结构,并表示一个Web文档的所有内容和组件。 注意:”文档对象模型”不是JavaScript语言的一...
首先,我们需要理解的是浏览器对象模型(Browser Object Model,BOM)。BOM是一个抽象的概念,它允许JavaScript代码控制浏览器的各种特性,如窗口、框架、历史记录、导航等。BOM的核心是`window`对象,它是全局对象...