BOM-window
窗口位置
screenLeft和screenTop
screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。Opera虽然也支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 属性并不对应，因此建议大家不要在 Opera 中使用它们。如：
<body>
<input type="text" id="input">
<script>
var x = self.setInterval("getPos()",10);
var input = document.getElementById("input");
function getPos(){
var leftPos;
if(typeof window.screenLeft == "number"){ //首先确定screenLeft 和screenTop 属性是否存在，如果不存在（在 Firefox 中），则取得screenX 和screenY 的值。
leftPos = window.screenLeft;
}else{
leftPos = screenX;
}
input.value = leftPos;
}
</script>
</body>
上面这个代码可以直接在input 中显示screenLeft 或screenX 的值。
由于各种原因，无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。
moveTo和moveBy
这两个方法都接收两个参数，其中moveTo() 接收的是新位置的 x 和 y 坐标值，而 moveBy() 接收的是在水平和垂直方向上移动的像素数。如：
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动 100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动 50 像素
window.moveBy(-50,0);
需要注意的是，这两个方法可能会被浏览器禁用，这两个方法都不适用于框架，只能对最外层的 window 对象使用。
窗口大小
innerWidth、innerHeight、outerWidth和outerHeight
在 IE9+、Safari和 Firefox中， outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸。
在Opera中， outerWidth 和 outerHeight 这两个属性的值表示页面视图容器的大小。
而innerWidth 和 innerHeight则表示该容器中页面视图区的大小。
在 Chrome 中， outerWidth 、 outerHeight 与innerWidth 、 innerHeight 返回相同的值，即视口（viewport）大小。
IE8 及更早版本没有提供取得当前浏览器窗口尺寸的属性，单可以通过DOM 取得可见区域的相关信息：
在 IE、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了页面视口的信息。
在 IE6 中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过 document.body.clientWidth 和 document.body.clientHeight 取得相同信息。
而对于混杂模式下的 Chrome，则无论通过 document.documentElement 还是 document.body 中的 clientWidth 和 clientHeight 属性，都可以取得视口的大小。
所以无法准确确定窗口本身的大小，但可以取得准确的页面视口的大小：
其他浏览器可以通过innerWidth 和innerHeight 取得；
IE8 之前可以通过DOM 取得：
标准模式下通过document.documentElement.clientWidth 和document.documentElement.clientHeight 取得；
混杂模式下通过document.body.clientWidth 和document.body.clientHeight取得；
可以用以下代码获取innerWidth 和innerHeight（其中，document.compatMode用来判断当前浏览器采用的渲染方式。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。）：
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
其他具体的有关移动设备视口的话题，推荐学习移动Web 开发。
resizeTo和resizeBy方法
这两个方法都接收两个参数，其中 resizeTo() 接收浏览器窗口的新宽度和新高度，而 resizeBy() 接收新窗口与原窗口的宽度和高度之差。如：
//调整到 100×100
window.resizeTo(100, 100);
//调整到 200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);
有可能被浏览器禁用。
导航和打开窗口
使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");
意思是在名为'topFrame'的框架中打开URL。这个参数也可以是： _self 、 _parent 、 _top 或 _blank 。
弹出窗口
如果给 window.open() 传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置的新浏览器窗口。第三个参数主要有：
fullscreen
yes 或 no 表示浏览器窗口是否最大化。仅限IE
height
数值 表示新窗口的高度。不能小于100
width
数值 表示新窗口的宽度。不能小于100
top
数值 表示新窗口的上坐标。不能是负值
left
数值 表示新窗口的左坐标。不能是负值
location
yes 或 no 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器）
menubar
yes 或 no 表示是否在浏览器窗口中显示菜单栏。默认值为 no
resizable
yes 或 no 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为 no
scrollbars
yes 或 no 表示如果内容在视口中显示不下，是否允许滚动。默认值为 no
status
yes 或 no 表示是否在浏览器窗口中显示状态栏。默认值为 no
toolbar
yes 或 no 表示是否在浏览器窗口中显示工具栏。默认值为 no
注意，整个特性字符串中不允许出现空格。
调整新窗口大小
有些浏览器不允许我们针对主浏览器窗口调整大小或移动位置。通过 window.open 返回的对象，可以像操作其他窗口一样操作新打开的窗口：
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
newWindow.resizeTo(400,1000);
关闭新窗口
调用 close() 方法还可以关闭新打开的窗口。
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
newWindow.close(); //打开之后立刻关闭
当然也可以使用window.close()。
opener属性
opener 属性，其中保存着打开它的原始窗口对象。
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
document.write(newWindow.opener == window); //true
将 opener 属性设置为 null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
newWindow.opener = null;
弹出窗口屏蔽程序
两种情况：
浏览器内置的屏蔽程序阻止的弹出窗口，window.open() 返回null，只要检测这个值即可；
浏览器扩展或其他程序阻止的弹出窗口，window.open() 抛出错误，则需要把 window.open() 封装在一个 try-catch 块中；
对于第一种：
var popWin = window.open("http://www.baidu.com/","_blank");
if (popWin == null){
console.log("the popup was blocked by explorer!")
}
如果 popWin 被浏览器内置的屏蔽程序阻止了，检测到 popWin 的值为 null；
对于第二种：
var blocked = false; //预设弹出窗口没有被屏蔽
//try-catch 代码块开始
try {
var popWin = window.open("http://www.baidu.com/","_blank");
if (popWin == null){
blocked = true; //如果值为null，说明被浏览器内置屏蔽程序屏蔽
}
} catch(ex){
blocked = true; //如果收到错误，说明被浏览器屏蔽插件屏蔽
}
//try-catch 代码块结束
//如果被屏蔽，返回字符串提示
if (blocked){
console.log("the popup was blocked!")
}
间歇调用和超时调用
JavaScript 是单线程语言。一个是在指定的时间后执行代码，另一个是每隔指定的时间就执行一次代码。
setTimeout()方法
接收两个参数，一个是要执行的代码，一个是以毫秒为单位的时间。如：
setTimeout("document.write('running!')", 1000);
setTimeout(function(){
document.write("running it!")
}, 2000);
由于传递字符串会导致性能问题，因此不建议用字符串作为第一个参数。
另外，JavaScript 有一个任务列队，如果列队是空的，添加的代码会立即执行；如果列队不是空的，那么要等到前面的代码执行完了以后再执行。
clearTimeout()方法
调用setTimeout()方法后，该方法会返回一个调用 ID。这个超时调用 ID 是计划执行代码的唯一标识符，可以通过它来取消超时调用。如：
var x = setTimeout(function(){
document.write("running it!")
}, 3000);
setTimeout(function(){
clearTimeout(x)
}, 2000); //因为在2秒钟的时候把 x 超时调用取消了，所以 3 秒后的超时调用则不会出现。
setInterval()方法 （由于一些原因，最好不要使用间歇调用）
参数仍然是两个，一个是指定的执行代码，另一个是间歇时间。如：
setInterval("document.write('running!')", 1000);
setInterval(function(){
document.write("running it!!!")
}, 1500);
同样的，调用该方法会返回一个间歇调用ID。使用clearInterval()停止：
var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;
var x = setInterval(showList, 100);
function showList(){
console.log(list[num]);
num ++;
if (num == list.length){
clearInterval(x)
console.log("done!")
}
}
如上，以 100 毫秒的速度遍历所有 list 的值。
也可以使用超时调用来实现，如：
var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;
setTimeout(showList, 100);
function showList(){
console.log(list[num]);
num ++;
if (num < list.length){
setTimeout(showList, 100);
}else{
console.log("done!");
}
}
最好使用超时调用来模拟间歇调用。
系统对话框
alert()
一个字符串参数，并将其显示给用户。
confirm()
一个字符串参数，并将其显示给用户，提供两个按钮，一个 Ok 按钮返回布尔值 true；另一个按钮 Cancel 返回布尔值 false。
prompt()
一个“提示框”，接收连两个参数： 要显示给用户的文本提示和文本输入域的默认值（可以为空字符串）。
如：
var str = prompt("insert your name here", "");
if (str.length > 0){
alert("welcome " + str);
var result = confirm("would you want something to drink ?");
if (result){
document.write("please wait");
}else{
document.write("have a seat");
}
}else {
alert("can not define");
}
系统对话框
alert()
一个字符串参数，并将其显示给用户。
confirm()
一个字符串参数，并将其显示给用户，提供两个按钮，一个 Ok 按钮返回布尔值 true；另一个按钮 Cancel 返回布尔值 false。
prompt()
一个“提示框”，接收连两个参数： 要显示给用户的文本提示和文本输入域的默认值（可以为空字符串）。
如：
var str = prompt("insert your name here", "");
if (str.length > 0){
alert("welcome " + str);
var result = confirm("would you want something to drink ?");
if (result){
document.write("please wait");
}else{
document.write("have a seat");
}
}else {
alert("can not define");
}
screen 对象
用处不大，screen 对象基本上只涌来表明客户端的能力：
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示器屏幕的宽度。
bufferDepth 设置或返回调色板的比特深度。
colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI 返回显示屏幕的每英寸水平点数。
deviceYDPI 返回显示屏幕的每英寸垂直点数。
logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval 设置或返回屏幕的刷新率。
history 对象
可以通过 history 对象借由用户访问过的页面列表，在不知道实际 URL 的情况下实现后退和前进。
go()方法
接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转，正数表示向前跳转。如：
history.go(-1); //后退一页
history.go(1); //前进一页
history.go(3); //前进三页
也可以传递给该参数一个字符串，如：
history.go("baidu.com"); //跳转到最近的 baidu.com 页面
back()和forward()方法
这两个方法可以模仿浏览器的后退和前进按钮如：
history.back(); //后退一页
length属性
该属性保存着历史纪录的数量。对于加载的第一个页面而言，history.length 为0，通过下面的代码可以测试该属性的值，可以确定用户是否一开始就打开了你的页面：
if (history.length == 0){
//第一个页面
}
history 对象虽然不常用，但在创建自定义的“后退”和“前进”的按钮，以及检测当前页面是不是用户历史纪录中的第一个页面时，还是必须使用它的。
location 对象基本介绍
location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息。还提供了一些导航功能。下面是 location 对象的所有属性：
假设当前的 URL 是: http://example.com:1234/test.htm#part2：
hash 设置或返回从井号 (#) 开始的 URL（锚）。//#part2
host 设置或返回主机名和当前 URL 的端口号。//example.com:1234
hostname 设置或返回当前 URL 的主机名。//example.com
href 设置或返回完整的 URL。//http://example.com:1234/test.htm#part2：
pathname 设置或返回当前 URL 的路径部分。///test/test.htm
port 设置或返回当前 URL 的端口号。//1234
protocol 设置或返回当前 URL 的协议。//http:
假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
search 设置或返回从问号 (?) 开始的 URL（查询部分）。//?f=hdom_loc_search
位置操作
assign()方法
为其传递一个 URL，如：
location.assign("http://www.baidu.com");
这样就可以立即打开新 URL 并在浏览器的历史纪录中生成一条记录。也可以用 location.href 和 window.location 设置为一个 URL 的值。
另外，也可以修改 location 对象的其他属性来改变 URL。这样会在浏览器的历史纪录中生成一条新的记录。
replace()方法
虽然会导致浏览器位置的改变，但不回在历史纪录中生成新的记录。并且用户不能返回到值钱的页面。如：
setTimeout(function(){
location.replace("http://www.baidu.com");
}, 3000)
上面的代码，三秒钟之后跳转到新的页面。
reload()方法
重新加载，接收一个可选参数，如下：
location.reload(); //可能从缓存中加载
location.reload(true); //从服务器重新加载
如：
setTimeout(reloading, 5000);
function reloading(){
location.reload(true);
}
每五秒钟刷新一次页面。
windows对象属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerheight | 返回窗口的文档显示区的高度。 |
| innerwidth | 返回窗口的文档显示区的宽度。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部宽度。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的先辈窗口。 |
| window | window 属性等价于 self 属性，它包含了对窗口自身的引用。 |
|
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
windows对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
BOM-window的更多相关文章
- DOM, DOCUMENT, BOM, WINDOW 有什么区别?
DOM: DOM 全称是 Document Object Model,也就是文档对象模型. DOM 就是针对 HTML 和 XML 提供的一个API.什么意思?就是说为了能以编程的方法操作这个 HTM ...
- JS_高程8.BOM window对象（1）
1.全局作用域 var age = 14; window.coloer = "pink"; console.log(delete window.age);//false 使用var ...
- BOM window对象方法
window对象方法 alert():弹出一个警告对话框. prompt():弹出一个输入对话框. confirm():弹出一个确认对话框.如果单击“确定按钮”返回true,如果单击“取消 ...
- 浏览器对象模型“BOM”-- window对象
global对象 全局对象 所有的全局变量和全局方法,都可以归在window上 <!DOCTYPE html> <html lang="en"> <h ...
- BOM，DOM，ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- BOM （Browser Object Model） 浏览器对象模型
l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...
- window.lacation.replace
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- WEB 技术分类 Javascript DOM(Element Node) BOM
Web technology for developers Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...
- javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- 关于dom&bom
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C的标准:[所有浏览器 ...
随机推荐
- Spring Cloud的几个组件
在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.智能路由.配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统.一个简答的微服务系统如下图: ...
- Jmeter 接口测试 响应结果中文是Unicode转为中文
1.增加一个后置处理器:BeanShell PostProcessor 内容如下: //获取响应代码Unicode编码的 String s2=new String(prev.getRes ...
- cocos2dx基础篇(16) 基本绘图DrawPrimitives
[3.x] (1)去掉前缀 "cc" (2)将 ccDraw***() 封装到了 DrawPrimitives 命名空间中. (3)重写绘图函数: draw(Ren ...
- 操作系统（1）——X86-32硬件介绍、实验环境相关配置、uCore部分技巧介绍
实验环境 本文假设已经创建虚拟机并配置好Ubuntu 16.04(网上太多教程了,所以这里就不赘述了). X86-32硬件介绍 x86指的是80386这种机器(一种32位CPU,在早期得到了广泛的应用 ...
- 【转载】PHP中foreach的用法
http://www.php.cn/php-weizijiaocheng-399438.html 很好用的PHP中foreach的用法详解,收藏!
- vim加脚本注释和文本加密
vim /etc/vimrc 一.李导版本 autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()" fun ...
- [知乎]ARM 到底是什么
[小宅按]近期公司推出来基于ARM芯片的服务器,本文就一些基本概念,比如ARM, ARM64, ARMv8, ARM7,ARMv7, 64位等让人费解的概念进行了粗浅地分析,涉及的关键字已用粗体标出. ...
- CAS单点登录系统入门--分布式登录验证
1.开源单点登录系统CAS入门 1.1 什么是单点登录 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要 ...
- 异步IO\数据库\队列\缓存\RabbitMQ队列
本节内容 Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 Redis\Memcached缓存 Paramiko SS ...
- POJ练习计划
题目链接:https://cn.vjudge.net/article/348 2019/7/24: [POJ-1423] [题解] [POJ-1503] 模板题