frames: 返回一个类数组对象，列出了当前窗口的所有直接子窗口。 fullScreen: 这个属性表明了窗口是否处于全屏模式下。 history: 提供了操作浏览器会话历史的接口。...moveTo(): 把open创建的窗口的左上角移动到一个指定的坐标。 open(): 打开一个新的浏览器窗口或查找一个已命名的窗口。 postMessage: 可以安全地实现跨源通信。...queueMicrotask: 提供加入微任务队列的回调接口。 resizeBy(): 按照指定的像素调整open创建的窗口的大小。...resizeTo(): 把open创建的窗口的大小调整到指定的宽度和高度。 scroll(): 滚动窗口至文档中的特定位置。 scrollBy(): 在窗口中按指定的偏移量滚动文档。...stop(): 停止页面载入，相当于点击了浏览器的停止按钮。 Window对象事件 加载相关 onbeforeunload: 该事件在即将离开页面（刷新或关闭）时触发。
# 窗口大小 outerWidth和outerHeight返回浏览器窗口自身的大小 innerWidth和innerHeight返回浏览器窗口中页面视口的大小（不含浏览器边框和工具栏） document.documentElement.clientHeight...和document.documentElement.clientWidth返回页面视口的宽度和高度 resizeTo()或resizeBy()可以调整窗口大小（可能被禁用） resizeTo()接收新的宽度和高度...# 导航与打开新窗口 window.open()可以用于导航到指定URL，也可以用于打开新浏览器窗口 接收四个参数：要加载的URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否代替当前加载页面的布尔值...空参可能会从缓存加载，传参true可强制从服务器重新加载 # navigator对象 navigator 对象的属性通常用于确定浏览器的类型 检测插件 通过plugins数组来确定，数组中每一项都包含如下属性...hashchange 会在页面 URL 的散列变化时被触发，开发者可以在此时执行某些操作。 状态管理 API 则可以让开发者改变浏览器 URL 而不会加载新页面。
(3) resizeBy(dw, dh); -- 调整(dw,dy)个像素,当x、y的值大于0时为扩大，小于0时为缩小。...第三个参数：用于描述打开窗口的特性，比如大小、是否有工具栏等。...第四个参数：布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定。...5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。...(2) availWidth -- 窗口可以使用的屏幕的宽度（以像素计）。
(); 2.3.3 移动与调整窗口大小 使用window.moveTo() 和window.resizeTo() 可以移动或调整当前窗口的大小。...location.reload(): 重新加载当前页面，类似于用户点击浏览器的刷新按钮。可以通过传递true强制从服务器重新加载。...page=2"); 详细解释： history.length: 返回当前会话中的历史记录条目数，包括当前页面。这对于判断是否可以后退或前进很有用。...Screen 对象 screen对象提供用户屏幕的相关信息，如屏幕的宽度、高度、可用宽度和可用高度等。 属性 描述 示例代码 screen.width 返回屏幕的宽度。...- 200); }, 2000); // 5秒后调整窗口大小 setTimeout(function() { newWindow.resizeTo(500, 500); }, 5000);
比如说，我们可以找出哪个浏览器正在被用来浏览一个页面，尽管这种办法不可靠。我们还可以找出它被浏览的屏幕尺寸，以及在当前页面之前已经访问过哪些页面。...如果传递参数true，会强制浏览器从服务端重新加载页面，而不是使用缓存的页面。 assign()方法可以用来从参数提供的URL中加载另一个资源。...该方法接收两个参数，分别是窗口要移动到的屏幕的X轴和Y轴坐标： window.moveTo(0,0); // 移动窗口到屏幕的左上角 你可以使用window.resizeTo()方法来调整窗口大小。...从可用性的角度来看，调整或移动用户窗口的大小也是一个坏主意。 许多浏览器阻止弹出式窗口，并在某些情况下不允许调用其中的一些方法。例如，如果有一个以上的标签打开，你就不能调整一个窗口的大小。...谨慎使用 上一节中所涉及的许多方法和属性在过去被滥用于可疑的活动，如用户代理嗅探，或检测屏幕尺寸以决定是否显示某些元素。这些做法现在已经被更好的做法所取代了，比如媒体查询和特征检测。
，而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。...resizeTo()、resizeBy()：可以调整浏览器窗口的大小。...这2个方法都接收2个参数，resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy() 接收新窗口与原窗口的宽度和高度之差。 ...100 × 100 window.resizeBy(100,50); //调整到200 × 150 5、导航和打开窗口 window.open()：可以导航到一个特定的URL，也可以打开一个新的浏览器窗口...这个方法可以接收4个参数：要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史纪录中当前加载页面的布尔值。
我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。...作为浏览器窗口时，提供了对浏览器操作的相关的API; Window全局对象 在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象: 比如在全局通过var声明的变量，...print() 打印当前窗口的内容。 prompt() 显示可提示用户输入的对话框。 resizeBy() 按照指定的像素调整窗口的大小。 resizeTo() 把窗口的大小调整到指定的宽度和高度。...window常见的事件 // 整个页面以及所有资源加载完成 window.onload = function() { console.log("window窗口加载完毕~") } window.onfocus...reload:重新加载页面，可以传入一个Boolean类型;如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。
流式布局（Liquid Layout） 为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位（通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示...改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 ...同自适应布局一样，在书写 CSS 样式时，元素宽度不能使用绝对宽度，而要使用相对大小。 Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。...要匹配足够多的屏幕大小，工作量不小，而且页面中会出现隐藏元素的操作，这样代码就比较冗余，加载时间加长，此外设计也需要多个版本。...弹性布局（rem/em布局） 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示
name可选值 含义 _blank URL加载到一个新的窗口，也是默认值 _parent URL加载到父框架 _self URL替换当前页面 _top URL替换任何可加载的框架集 name 窗口名称...menubar yes|no|1|0 是否显示菜单栏，默认值是yes resizable yes|no|1|0 是否可调整窗口大小，默认值是yes scrollbars yes|no|1|0 是否显示滚动条...2.3 窗口位置和大小 BOM 中用来获取或更改 window 窗口位置，窗口高度与宽度，文档区域高度与宽度的相关属性和方法有很多。...() 将窗口移动到相对的位置 方法 moveTo() 将窗口移动到指定的位置 方法 resizeBy() 将窗口大小调整到相对的宽度和高度 方法 resizeTo() 将窗口大小调整到指定的宽度和高度...目前只有 window.open() 方法打开的的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。
、width 窗口文档显示区的高度、宽度，单位为像素 left、top 窗口与屏幕左边、顶端的距离，单位为像素 示例：制作一个从天而降的广告页面，打开主页面时，广告页面也随之打开 可以将当前浏览器页面跳转到某个曾经打开过的页面 方法 描述 back() 后退一个页面，相当于浏览器后退按钮 forward() 前进一个页面，相对于浏览器前进按钮 go()...Web 协议（http:// 或 https://） reload() 方法 重新加载当前页面，相对于浏览器的刷新按钮 assign() 方法 加载新的文档 示例：使用location对象中的属性和方法实现加载用户所选页面...screen对象和navigator对象 3.4.1 screen对象 window.screen 对象包含了用户屏幕的相关信息，在编写时可以不使用 window前缀 属性 描述 availWidth...，所以可以使用对象检测来嗅探不同的浏览器。
大家会发现我们又拓展了一个条件，对，就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢？...当然我们还可以用到之前提供的几个特性，如下： ? 针对视口宽度不大于768像素的情况加载大括号中的样式。...浏览器默认会根据当前屏幕和内容作调整，在webkit内核的浏览器中只需要-webkit-text-size-adjust:none就禁止自动调整，至于是否全局活局部使用看自己的项目需求。 ?...根据上面的图表（红色部分为默认，当然不同的浏览器渲染默认值不一样，具体还需各位实测）可以看出，我们只需设置html根元素字体大小为75%，对应的px值就是12，这样我们可以很方便的设置页面的宽高和字体大小...（5）、iOS可禁止用户在新窗口打开页面 在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS
它可以接受四个参数： 参数： 1)要加载的URL 2)窗口目标,框架名 特殊名： _self 当前浏览器页面 _parent 当前页面父页面 _...resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏....默认值是yes top=pixels 窗口顶部的位置.仅限IE浏览器 4)表示新页面是否取代浏览器历史记录中当前加载页面的布尔值 如果传递了第二个参数，而且该参数是已有窗口或框架的名称，就会在具有该名称的窗口或框架中加载第一个参数指定的...=200,toolbar=yes'); 调整窗口大小 //调整到100*100 resizeTo(100,100);//接受浏览器窗口的新高度和新宽度 //调整到...screenTop : screenY; 4.窗口大小 innerWidth 页面视图区的宽度 innerHeight 页面视图区的高度 outerWidth
方法 说明 availWidth 返回屏幕的宽度（不包括 windows 任务栏） availHeight 返回屏幕的高度（不包括 windows 任务栏） width 返回屏幕的总宽度 height...其中包括窗口大小更改，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果； 常用窗口事件 方法 说明 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时...当事件属性returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面。否则，事件被静默处理。...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动时触发 load事件示例 /* 输出 div...}) resize 事件代码示例 多用于检测不同屏幕尺寸，自适应布局 /* 调整浏览器窗口时，获取可视窗口宽高 */ window.addEventListener("resize",
在浏览器对象模型中，把浏览器的各个部分都用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作 下面我们来介绍一下浏览器对象模型的基本的对象： window 代表了一个新开的窗口...screen 代表了整个屏幕的对象 window对象常用的方法 //open() 打开一个新的窗口（参数一：打开的地址，参数二：是否为新的浏览器窗口，参数三：新窗口属性，参数四：用来替代的地址）...; //resizeTo() 将窗口的大小更改为指定的宽度和高度值 window.resizeTo(300,200); //moveBy() 相对于原来的窗口移动指定的x、y值 window.moveBy...(100,0);//谷歌浏览器貌似不支持了 //moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。..."); bodyNode.onload = function(){ alert("body的元素被加载完毕"); } 常用的事件 鼠标点击相关： onclick 在用户用鼠标左键单击对象时触发
鼠标事件 onload:页面加载时触发 onclick:鼠标点击时触发 onmouseover:鼠标滑过时触发 onmouseout:鼠标离开时触发 onfoucs: 获取焦点时 onblur:失去焦点时...事件是 文档或浏览器窗口中发生的一些交互。...在鼠标移动时发生 onmousedown 在鼠标按下时发生 onload 子页面元素加载完成时发生 onblur 在对象失去焦点发生 onfocus 在对象获取焦点发生 onchange 在域的内容发生改变时...onsubmit 在表单提交时 onresize 在窗口大小被调整时 onscroll 在滚动条拖动时 onkeydown 在用户按下一个键盘时 onkeypress 按下并释放时发生 onkeyup...函数的作用，定义，调用，return，arguments screen对象包含有客户端显示屏的信息 width 返回显示器屏幕的宽度 height 返回显示屏幕的高度 availHight
的区别 link是XHTML标签，除了加载CSS外，还可以定义RSS，@import只能加载CSS link引用CSS时，在页面载入时同时加载，@import需要页面网页完全载入以后加载，可能会出现闪屏...View部分：分成三个部分：窗口部分、滚动部分和布局部分 窗口的api：操作浏览器窗口的位置、尺寸等，包括；moveTo（x，y)：窗口移动到屏幕的特定坐标；moveBy（x，y）：窗口移动特定距离；resizeTo...（x，y）：改变窗口大小到特定尺寸；resizeBy（x，y)：改变窗口大小特定尺寸。...，不断扩充，以适应各种环境的要求 在项目中是如何适配的 自适应和响应式概念 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小 响应式：会随着屏幕的实时变动而自动调整，是一种自适应 常见的适配方案（4种...常见的响应式布局方式有哪些 流式布局，也叫百分比布局，将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩 栈格系统（Grid System）将一个页面划分为几个主要区域，定义这些区域的大小、位置、层次等关系
今天我们来聊聊如何用JavaScript让HTML中的Canvas画布全屏显示，做到页面随便怎么调整大小，画布都能完美适应整个窗口。 我们以开发一个简单的全屏小游戏为例子。...接下来要做的就是用JavaScript控制它的大小。 第二步：让Canvas自动全屏 为了让Canvas全屏显示，我们需要在页面加载时动态设置它的宽度和高度为浏览器窗口的大小。...window.innerHeight; // 设置画布高度为窗口高度 // 这里你还可以根据全屏尺寸重新初始化游戏元素，比如砖块位置、球的速度等 }; // 页面一加载就让Canvas全屏 setCanvasFullScreen...这就确保了画布占满整个页面的可视区域。 页面加载时设置全屏：setCanvasFullScreen()这行代码是在页面刚加载时就让Canvas全屏的，不需要用户手动调整。...除了游戏，像是一些数据可视化的仪表盘、互动性强的动画网页等，都可以用到这种全屏Canvas的效果。比如一个全屏的数据图表，随着窗口大小的调整，图表的内容也自动跟随变化，不会让用户觉得布局混乱。
----> left/top（数字）—— 屏幕上窗口的左上角的坐标。这有一个限制：不能将新窗口置于屏幕外（offscreen）。 width/height（数字）—— 新窗口的宽度和高度。...宽度/高度的最小值是有限制的，因此不可能创建一个不可见的窗口。 窗口功能： menubar（yes/no）—— 显示或隐藏新窗口的浏览器菜单。...toolbar（yes/no）—— 显示或隐藏新窗口的浏览器导航栏（后退，前进，重新加载等）。 location（yes/no）—— 显示或隐藏新窗口的 URL 字段。...resizable（yes/no）—— 允许禁用新窗口大小调整。不建议使用。 scrollbars（yes/no）—— 允许禁用新窗口的滚动条。不建议使用。 为什么要使用弹窗？...关闭窗口 关闭窗口： window.close() 检测窗口是否关闭状态： window.close true 关闭状态 false 开启状态 window.close() 弹窗聚焦/失焦 window.focus
因为程序自上而下执行,button还没有创建就获取元素,肯定是会报错的,所以我们要学习窗口加载事件,将窗口的事件全部加载完毕以后再触发这个事件肯定就可以生效了....是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数....注意: 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕再去执行处理函数 window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个...调整窗口大小事件 window. addEventListener('resize', function( ){ }); window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数...我们测试一下: 注意: 只要窗口大小发生像素变化,就会触发这个事件 我们经常利用这个事件完成响应式布局.window.innerWidth当前屏幕的宽度 定时器 window对象给我们提供了两个特别好用的方法
七、窗口事件 常用鼠标事件： 名称 描述 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件 beforeunload window、document 和它们的资源即将卸载时触发...当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动时触发 （1）实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半...写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件。...，window.innerWidth代表浏览器窗口宽度，浏览器宽度不可能超过屏幕宽度。
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
