BOM操作-1:innerWidth、innerHeight可视区宽度高度 / scroll滚动条 / open、close打开关闭 / alert等弹窗 / resize窗口大小改变

最新推荐文章于 2023-09-26 13:57:44 发布
最新推荐文章于 2023-09-26 13:57:44 发布
阅读量523 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/104886522
版权
本文介绍了BOM（浏览器对象模型）中的核心对象，包括window、navigator、location、history和screen，并详细讲解了如何获取页面、屏幕和可视区的尺寸，如innerWidth、innerHeight、scrollWidth、scrollHeight等。同时，讨论了滚动条位置的获取，使用open和close方法打开和关闭窗口，以及alert、confirm和prompt弹窗的使用。最后提到了resize事件监听窗口大小变化。
摘要由CSDN通过智能技术生成

BOM (browers object model) 浏览器对象模型

BOM 五大对象

        - window JS 在浏览器中的顶层对象，var 和 function 声明的全局函数都是挂载window的属性中

        - navigator 浏览器相关信息 (浏览器型号、版本、系统版本、网络信息等)

        - location 地址栏信息 (hash、search、href)

        - history 历史记录 (go、back、forward)

        - screen 屏幕信息 (width、height)

获取尺寸相应方法

    - 获取可视区尺寸

        - document.documentElement.clientWidth / document.documentElement.clientHeight

        - window.innerWidth 可视区宽度

        - window.innerHeight 可视区高度

    - 获取页面尺寸

        - document.body.scrollWidth、document.body.scrollHeight

        - document.documentElement.offsetWidth、document.documentElement.offsetHeight

    - 获取屏幕尺寸

        - 

最低0.47元/天 解锁文章
kino2046
关注
专栏目录
pc弹窗宽度_弹窗拖拽和改变大小
weixin_34529812的博客
02-08 182
.box{ position: fixed; width: 200px; height: 200px; background-color: red; }class DragResize {constructor(select, params = {}) {this.box = document.querySelector(select);if (!this.box) {throw new Erro...
获取屏幕可视区域的宽度和高度
热门推荐
wis2007的专栏
09-07 1万+
window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。 window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是宽度包含了纵向滚动条的宽度。 document.documentElement.clientWidth与document.documentElement.clientHeigh
自动resize Alert弹出窗口大小
Java与咖啡
12-10 124
http://www.imlqw.com/tag/flex-2
C#中如何调整easyui中控件方法$.messager.alert弹窗窗口和字体的大小
.NET开发工程师吃瓜日常的日常
06-20 1095
但是我这边这样设置后显示就乱码了，不知道是不是版本太老的原因，后面结合这个我这样改的。这是easyui 默认的一个效果，然后 我在网上搜调整大小，搜到的代码是这样的。
js调整浏览器窗口大小事件window.innerWidth
爬楼梯的前端小白的博客
02-02 2285
js调整浏览器窗口大小事件window.innerWidth，当窗口小时，隐藏某div
BOM中innerWidth/innerHeight方法、alter（）、confirm（）、prompt（）、location、onload、onresize、onscroll事件和scrollTo
YY的博客
10-15 571
BOM介绍、BOM里window对象方法介绍、浏览器的事件：onload事件和onresize事件、onscroll事件和scrollTo（）方法
每天一点面试题（15）--------防抖 和 节流//原型 和 原型链
weixin_43718291的博客
04-08 173
一丶 防抖 和 节流 1.防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟 //防抖debounce代码： function debounce(fn) { let timeout = null; // 创...
function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };根据你提供的代码，我修改后任然存在行数过多时，悬浮窗显示后靠近页面底部，无法显示完整图片在当前页面，并且我需要在点击放大图片后无法再此点击当前放大图片，等我还原取消悬浮窗后才可以再次点击图片放大，我代码存在什么问题
07-14
1. 悬浮窗显示在页面底部：这可能是由于计算偏移量时没有考虑到页面滚动的原因。您可以尝试将`scrollTop`的计算方式修改为`scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body...
在窗体尺寸发生变化或滚动情况下永远保持水平/垂直方向居中的广告小窗口
05-24
要实现在窗体尺寸变化或滚动时保持广告小窗口水平/垂直方向居中，可以使用CSS的`position`和`transform`属性。 首先，在广告小窗口的CSS中添加以下代码： ```css .ad-window { position: fixed; top: 50%; left...
iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对。
学习笔记
07-02 1409
我有一个日记应用，是可以作为独立 Web 应用运行的那种，但在旋转屏幕的时候获取到的和就不对了，不是屏幕的正常尺寸。导致内容显示不正常。iPhone和 iPad 上都是这样的。本来应该是这样的。在旋转一次再转回来的时候就成了这样。
iframe关于滚动条的去除和保留
weixin_30555753的博客
11-16 580
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？ 一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 s...
弹出框适应窗口大小（1）
nano-dhh
11-30 3593
实现弹出框根据窗口的大小定位top,left，注意只是首次获取窗口的小大，并没有处理根据窗口大小变化触发的事件
如何修改AlertDialog弹出界面的大小
最新发布
An_light的博客
09-26 1187
修改AlertDialog的宽高无效
JavaScript对象 window对象方法、confirm确认对话框、关闭浏览器、提示框prompt、设置窗口大小和滚动浏览器、打开浏览器、周期性弹框
Birdlun的博客
07-05 1915
目录 Window对象属性 Window对象常用方法 列：关闭浏览器（confirm（）） 列：使用提示对话框（prompt（）） 列：重设窗口大小与滚动当前页的html文档 列：打开浏览器 列：实现周期性的出现弹框 Window对象属性 document 返回改窗口装载的html文档 location 返回该窗口装载的html文档的url navigtor 返回浏览当...
在Iframe子页面中使用$(window).height()获取窗口高度为0
weixin_33709219的博客
07-19 2344
为什么80%的码农都做不了架构师？>>> ...
js 动态改变窗口大小
wwf1225的博客
09-18 744
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
弹出窗口的命令总结 　window.open window.alert window.comfirm window.prompt window.showModalDialog window.showM
码农高端会所
03-19 5306
弹出窗口的命令总结 　window.open   window.alert   window.comfirm    window.prompt   window.showModalDialog    window.showModelessDialog 一、 window.open(pageURL,name,parameters)  pageURL 为弹出窗口路径  name 为弹出
如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？
weixin_34112208的博客
11-16 1万+
引言 页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。 滚动条的宽度是多少？ 既然要解决...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值