开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jquery获取window高度

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。window 对象代表浏览器窗口，window.height 属性返回浏览器窗口的内部高度（以像素为单位）。

相关优势

简化 DOM 操作：jQuery 提供了简洁的语法来选择和操作 DOM 元素。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得开发者可以编写一次代码，在多个浏览器中运行。
丰富的插件生态：jQuery 有大量的插件库，可以轻松实现各种功能。

类型

获取窗口高度的方法主要有以下几种：

使用 window.innerHeight：
使用 window.innerHeight：
使用 jQuery 的 $(window).height()：
使用 jQuery 的 $(window).height()：

应用场景

获取窗口高度的应用场景包括但不限于：

响应式布局：根据窗口大小调整页面布局。
滚动事件：在滚动到页面底部时加载更多内容。
弹窗和模态框：动态调整弹窗或模态框的高度以适应窗口大小。

常见问题及解决方法

问题：为什么使用 jQuery 获取窗口高度时返回值为 0？

原因：

页面尚未完全加载。
在某些情况下，DOM 元素可能还未渲染完成。

解决方法：

确保在页面加载完成后获取窗口高度，可以使用 $(document).ready() 或 $(window).load()。
确保在页面加载完成后获取窗口高度，可以使用 $(document).ready() 或 $(window).load()。
如果是在动态内容加载后获取高度，确保在内容加载完成后再获取。
如果是在动态内容加载后获取高度，确保在内容加载完成后再获取。

问题：为什么在不同设备上获取的窗口高度不一致？

原因：

不同设备的屏幕尺寸和分辨率不同。
浏览器的工具栏和地址栏可能会影响窗口高度。

解决方法：

使用 window.innerHeight 获取视口高度，而不是整个浏览器窗口的高度。
使用 window.innerHeight 获取视口高度，而不是整个浏览器窗口的高度。
在响应式设计中，考虑使用媒体查询来处理不同屏幕尺寸的情况。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Window Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var windowHeight = $(window).height();
            console.log("Window height using jQuery: " + windowHeight);

            var viewportHeight = window.innerHeight;
            console.log("Viewport height using JavaScript: " + viewportHeight);
        });
    </script>
</body>
</html>

通过以上方法，可以有效地获取窗口高度，并解决在开发过程中可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript、Jquery获取屏幕的宽度和高度

在日常的项目中经常需要获取屏幕的宽度或者高度，简单记录一下： Javascript方法获取： document.body.clientWidth //网页可见区域宽 document.body.clientHeight... //网页正文部分上 window.screenLeft //网页正文部分左 window.screen.height //屏幕分辨率的高 window.screen.width //屏幕分辨率的宽 window.screen.availHeight... //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取： ($(window).height()); //浏览器当前窗口可视区域高度 (...$(document).height()); //浏览器当前窗口文档的高度 ($(document.body).height());//浏览器当前窗口文档body的高度 ($(document.body...).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin ($(window).width()); //浏览器当前窗口可视区域宽度

8.6K0 0

跨浏览器获取不同环境的window窗口宽度和高度

在IE9+、Safari和Firefox中，outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。...虽然最终无法确定浏览器窗口本身的大小，但可以取得页面视口的大小，代码如下： var pageWidth = window.innerWidth, pageHeight = window.innerHeight... = document.body.clientWidth; pageHeight = document.body.clientHeight; } } 注：对于移动设备， window.innerWidth...和 window.innerHeight 保存着可见视口，也就是屏幕上可见页面区域的大小。

4.5K1 0

jQuery Custom PopUp Window

xhtml"> Demo for jQuery...Custom PopUp Window /*Geovin Du: Style you custom popupbox according...padding-top:5px; } jquery.../1.4.0/jquery.min.js"> //http://www.htmldrive.net/categorys/... Click Here for 2nd Custom Modal Window</h1

1630 0

jquery 实现iframe 自适应高度

超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错地方了哦。...iframe id="main" src="test.html" width="700" height="300" frameborder="0" scrolling="auto"> jquery...代码１： //注意：下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document...).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); }); jquery代码２： //

3.5K4 0

Jquery基础(七) window.parent与window.openner区别

:父窗口对象 top.window:第一个父窗口的对象三、重点看看window.parent与window.openner区别 window.parent 是iframe页面调用父页面对象，当我们想从...iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取；例子如下： A.html 父页面 ...script> 文本框值为：获取父窗口内的文本框值...script> 文本框值为：获取父窗口内的文本框值...' window.parent也是常在框架中使用，刷新：window.parent.location.reload();或者刷新某个框架：window.parent.MainForm.location.reload

2.2K2 0

Javascript 获取div真实高度

原文：http://www.cnblogs.com/zhwl/p/3858682.html 实际测试过程中，发现上面获取真实高度是有问题，其实无论是设置在样式表还是在行内设置，都会获取到你设置的值，如果要获取真实高度...：获取真实高度...： alert(parseInt($('.article__content div').get(0).offsetHeight)); 获取时只要在这个样式里面的div大小，这个就是真实高度。...这里还附带其它的获取高度方法 alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度...body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width())

7K3 0

JavaScript获取高度和宽度

document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop...网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight...屏幕可用工作区宽度：window.screen.availWidth

5.7K6 0

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...： document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

16.4K2 0

Python获取Linux或Window

前段时间写了一篇博文名为《利用Python脚本获取Windows和Linux的系统版本信息》，本篇博文利用这篇文章中的知识提供一个增强版本的获取信息的Python脚本。...l" print table.get_string() print getUser() print getUptime2() 注：脚本内容可以通过GitHub获取...已知存在问题：暂时未实现获取Windows下网卡的中文可视名称 Windows下的tty名称默认为None，暂时没有设置对用户友好的显示 Ubuntu Linux上motd信息的用户登录数量显示为同一用户同一个

3.8K1 0

根据获取内部元素的高度，设置iframe的高度

iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。...下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById

12.9K2 0

jquery自定义插件——window的实现

本例子实现弹窗的效果： 1、jquery.show.js /* * 开发者：lzugis * 开发时间：2014年6月10日 * 实现功能：点击在鼠标位置显示div * 版本序号：1.0...showdiv.css("display","block"); showdiv.css("position","absolute"); showdiv.css("left",($(window...).width()-options.width)/2+"px"); showdiv.css("top",($(window).height()-options.height)/2+"px");.../jquery.showdiv.css"/> jquery/jquery.min.js"> jquery/jquery.showdiv.js"> $(document

1.3K2 0

mini react-window(一) 实现固定高度虚拟滚动

固定高度场景这种场景中我们已知每一项的渲染高度，可以根据渲染个数计算出整体高度，我们只需要对可是区域内的渲染进行渲染计算即可。...import {FixedSizeList} from 'react-window'import '....实现固定渲染虚拟滚动创建自己实现组件的目录// src/react-window/index.jsexport {default as FixedSizeList} from '..../FixedSizeList'// src/react-window/FixedSizeList.jsimport createListComponet from '....return class extends React.Component { render() { // 这个类组件是返回的页面具体使用的那个组件，所以可以直接通过属性获取值

3K5 1

android获取状态栏高度

解决方案：为了达到良好的兼容性，我们可以如下变现代码 /** * 用于获取状态栏的高度。 * * @return 返回状态栏高度的像素值。...statusBarHeight = frame.top; } return statusBarHeight; } 还可以使用Resource对象获取...*/ @TargetApi(19) public SystemBarTintManager(Activity activity) { Window...false); } finally { a.recycle(); } // check window...extends Window> clazz = activity.getWindow().getClass(); try { int darkModeFlag

5.5K6 0

jq获取文档和窗口高度

jquery获取窗口高度和窗口高度，$(document).height()、$(window).height() 1.$(document).height()：整个网页的文档高度 2....$(window).height()：浏览器可视窗口的高度 3.$(window).scrollTop()：浏览器可视窗口顶端距离网页顶端的高度（垂直偏移） 4....$(document.body).height();//浏览器当前窗口文档body的高度 5....$(window).width(); //浏览器当前窗口可视区域宽度 7.$(document).width();//浏览器当前窗口文档对象宽度 8....$(document.body).width();//浏览器当前窗口文档body的高度 9.

3K1 0

JavaScript 获取屏幕的高度和宽度

screen.width:显示浏览器的屏幕的宽度 screen.Height:显示浏览器的屏幕的高度 screen.availWidth：显示浏览器的屏幕的可用宽度 screen.availHeight...:显示浏览器的屏幕的可用高度（这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。）

10.6K2 0

mini react-window(二) 实现可知变化高度虚拟列表

图片react-window 库实现效果// src/variable-size-list.js// 固定高度列表import { VariableSizeList } from "react-window.../index.css";// 这里给出每个元素的高度计算方式，可以根据自己的业务需求按条件计算，这里简单给出随机获取const rowSizes = new Array(1000).fill(true)...// 获取每个条目对应的元数据 {index: {size, offset}}const getItemMetadata = (props, index, instanceProps) => { /...自己穿入的函数 const {itemSize} = props const {itemMetadataMap, lastMeasuredIndex} = instanceProps /// 当前获取的条目..., scrollOffset, instanceProps) => { // 拿到可视区域的高度和元素数量 const {height, itemCount} = props // 获取开始索引对应的元数据

2.3K4 0

jquery $(document).ready()与window.onload的区别

在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。...jQuery 代码如下： $(window).load(function (){ // 编写代码 }); //等价于 JavaScript 中的以下代码 Window.onload..., that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE..., that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not

3.3K3 1

jquery 获取所有的标签

jQuery获取所有标签在前端开发中，使用jQuery能够方便地操作DOM元素。有时候我们需要获取页面上所有的HTML标签，可以通过jQuery来实现。...本文将介绍如何使用jQuery获取所有的标签，并展示一个简单的示例代码。使用jQuery获取所有的标签jQuery提供了选择器来筛选和操作DOM元素，通过使用通配符*可以选择所有的标签。...DOCTYPE html> jQuery - 获取所有标签 jquery.com/jquery...通过这种方法，我们可以使用jQuery方便地获取页面上的所有标签，并进行进一步的处理和操作。希望这篇技术博客能帮助您理解如何使用jQuery获取所有的标签。感谢阅读！...通过使用jQuery获取所有标签，我们可以更灵活地处理页面中的元素。下面将通过一个示例代码，结合实际应用场景演示如何获取所有的标签，并为其添加点击事件。

4.9K1 0

微信小程序获取页面高度

watchHeight() { var query = wx.createSelectorQuery() //.box为指定类名高度 query.select('.box')

4.5K1 0

chrome插件获取window挂载的属性

需求：我们在开发浏览器插件的时候，有一些页面中会变一些变量挂在全局变量中（window.xxx）举例：window.xxx = [1,2,3,4,5] 这些信息可能是页面渲染的必要数据，我们之前是通过爬取...dom来获取页面的一些信息的，那现在我们就可以通过它挂载的全局变量，来获取相对应的信息了，省时省力，效率也有所提高，当然这是一个比较幸运的情况，如果页面没有把一些数据挂在全局中，我们也不想通过爬取...dom来获取信息，就需要模拟页面中的api请求，这是比较繁琐的一件事情。...现在我要获取它，就可以创建一个script元素，append到head。而这个script元素的执行环境是原始网页的，可以自由使用fp这个变量。...上挂载的属性拉，就可以在我们的contentScript里面使用了，问题的延申：为什么不能够在contentScript里面直接使用window的全局变量呢？

3.7K2 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭