开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 怎么获取当前页面的高度

在JavaScript中，获取当前页面高度可以通过多种方式实现，以下是一些常用的方法：

1. `window.innerHeight`

这个属性返回浏览器窗口的视口（viewport）高度，包括滚动条（如果存在）。

console.log(window.innerHeight);

2. `document.documentElement.clientHeight`

这个属性返回文档的根元素（<html>）在视口中的可视高度，不包括滚动条。

console.log(document.documentElement.clientHeight);

3. `document.body.clientHeight`

这个属性返回<body>元素的高度，这个高度包括由于溢出而在屏幕上不可见的内容。

console.log(document.body.clientHeight);

4. 获取整个文档的高度

如果你想要获取整个文档的高度，而不仅仅是视口的高度，可以使用以下方法：

function getDocumentHeight() {
    return Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );
}

console.log(getDocumentHeight());

应用场景

响应式设计：根据页面高度调整布局。
滚动事件：监听滚动事件时，可能需要知道页面的总高度。
动态内容加载：在用户接近页面底部时加载更多内容。

注意事项

不同浏览器可能会有不同的实现，因此在跨浏览器兼容性方面需要进行测试。
当页面内容动态变化时（例如通过AJAX加载内容），可能需要重新计算页面高度。

解决问题的方法

如果你发现获取的页面高度不正确，可以尝试以下步骤进行调试：

确保在DOM完全加载后获取高度，可以在window.onload事件或者使用DOMContentLoaded事件中获取。
检查是否有CSS样式影响了页面布局，比如body或html的margin和padding。
如果使用了框架或库（如Bootstrap），确保没有框架的样式影响到页面高度的计算。

通过上述方法，你应该能够准确地获取当前页面的高度，并根据需要进行相应的处理。

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

有帮助

没帮助

相关·内容

PHP 技巧：获取当前页面的 URL

有时候我们需要获取每个页面的 URL，但是 WordPress 只有 get_permalink 模板函数能在日志或者静态页面获取当前页面的 URL，而其他页面好像也没有相关的函数，即使有相关的函数，首先都要判断当前是什么页面...其实不用找 WordPress 函数，PHP 本身就提供了一些系统变量，通过整合下就能获取当前页面的 URL。...$_SERVER['REQUEST_URI']; } 然后使用 wpjam_get_current_page_url 就能获取当前页面的 URL。

2.1K5 0

react获取当前页面的url参数

react获取当前页面的url参数，必须在url路由对应的组件上获取，在子组件上获取不到，为undefined,获取形如 /news/:id 的后面的参数 id this.props.match.params.id...获取形如 /news?

11.4K1 0

JQUERY获取当前页面的URL信息

window.location 属性描述 hash 设置或获取 href 属性中在井号“#”后面的分段。...host 设置或获取 location 或 URL 的 hostname 和 port 号码。 hostname 设置或获取 location 或 URL 的主机名称部分。...href 设置或获取整个 URL 为字符串。 pathname 设置或获取对象指定的文件名或路径。 port 设置或获取与 URL 关联的端口号码。...protocol 设置或获取 URL 的协议部分。 search 设置或获取 href 属性中跟在问号后面的部分。...写在一个公共的js里就好 alert（window.location.href） ...

2.9K1 0

jquery获取当前页面的URL信息

1、设置或获取对象指定的文件名或路径。...window.location.protocol 例： alert(window.location.protocol); 则输出：http: 5、设置或获取 href 属性中在井号“#”后面的分段...window.location.host 例： alert(window.location.host); 则输出：http:localhost:8086 6、设置或获取 href 属性中跟在问号后面的部分...topicId=361 7、window.location 属性描述 hash 设置或获取 href 属性中在井号“#”后面的分段。...protocol 设置或获取 URL 的协议部分。 search 设置或获取 href 属性中跟在问号后面的部分。

3.7K1 0

js得到当前页面的url信息

1，设置或获取对象指定的文件名或路径。 console.log(window.location.pathname) ? 2，设置或获取整个 URL 为字符串。...3，设置或获取与 URL 关联的端口号码。 console.log(window.location.port) ? 4，设置或获取 URL 的协议部分。...5，设置或获取 href 属性中在井号“#”后面的分段。 console.log(window.location.hash) ?...7，设置或获取 href 属性中跟在问号后面的部分。 console.log(window.location.search) ?...8，获取变量的值(截取等号后面的部分) var url = window.location.search; console.log(JSON.stringify(url)); console.log

5.4K4 1

JS刷新当前页面的方法总结

一、刷新页面方法介绍 1.reload() 该方法强迫浏览器刷新当前页面。...语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。...location.replace(location.href); 返回并刷新页面： location.replace(document.referrer); document.referrer //前一个页面的...http-equiv="refresh" content="20;url=http://www.jb51.net"> 其中20指隔20秒后跳转到http://www.jb51.net页面 3.页面自动刷新js...myrefresh() { window.location.reload(); } setTimeout('myrefresh()',1000); //指定1秒刷新一次 4.JS

10.5K3 0

如何用js得到当前页面的url信息方法(JS获取当前网址信息)

设置或获取对象指定的文件名或路径。 alert(window.location.pathname) 设置或获取整个 URL 为字符串。...alert(window.location.href); 设置或获取与 URL 关联的端口号码。 alert(window.location.port) 设置或获取 URL 的协议部分。...alert(window.location.protocol) 设置或获取 href 属性中在井号“#”后面的分段。...alert(window.location.host) 设置或获取 href 属性中跟在问号后面的部分。...alert(window.location.search) 获取变量的值(截取等号后面的部分) var url = window.location.search; // alert(url.length

7.2K7 0

PHP中获取当前页面的完整URL

id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."..."; #localhost //获取网页地址 echo $_SERVER['PHP_SELF']."..."; #/blog/testurl.php //获取网址参数 echo $_SERVER["QUERY_STRING"]."..."; #id=5 //获取用户代理 echo $_SERVER['HTTP_REFERER'].""; //获取完整的url echo 'http://'.

2.2K1 0

PHP中获取当前页面的完整URL

id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."..."; #localhost //获取网页地址 echo $_SERVER['PHP_SELF']."..."; #/blog/testurl.php //获取网址参数 echo $_SERVER["QUERY_STRING"]."..."; #id=5 //获取用户代理 echo $_SERVER['HTTP_REFERER'].""; //获取完整的url echo 'http://'.

3.7K7 0

Js获取当前页面url参数

<script type="text/javascript"> function getUrlParams(url) { ...

22K4 0

PHP获取当前页面的FORM表单提交

PHP获取当前页面的FORM表单提交因为制作页面需求，需要在当前页面用php来响应，不做跳转。所以，研究了一下当前页面获取form表单提交的数据！... if(isset($_POST['submit'])){ // 执行语句 // 获取值 $

2.9K5 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

12.6K2 0

js刷新当前页面的5种方式

强制刷新当前页面 1、reload　– 强迫浏览器刷新当前页面 location.reload([bForceGet]) //重新加载当前文档 bForceGet，可选参数，默认为 false，...从客户端缓存里取当前页。

10.2K4 0

WordPress 技巧：获取 WordPress 后台当前页面的 Post type

我们在进行 WordPress 二次开发的时候，有时候需要知道 WordPress 后台当前页面的 Post type，下面的代码可以帮到我们： function get_current_post_type

4023 0

PHP获取当前页面的完整URL参数及分割的方法

PHP获取当前页面的URL及各项参数的方法：页面链接：http://oa.cn/test.php?...a 获取域名或主机地址 echo $_SERVER['HTTP_HOST']; 输出结果： oa.cn 获取网页地址（域名后面的部分，不包含参数） echo $_SERVER['PHP_SELF']...; 输出结果： /test.php 获取网址参数 echo $_SERVER["QUERY_STRING"]; 输出结果： a 如果是带有id： id=5 获取用户代理 echo $_SERVER['...HTTP_REFERER']; 获取完整的url 方法一： echo 'http://'....a 获取完整url（包含端口号） echo 'http://'.$_SERVER['SERVER_NAME'].':'.$_SERVER["SERVER_PORT"].

9.2K1 0

当前页面的脚本发生错误如何解决_电脑出现当前页面脚本错误怎么办

3、在设置中，将“禁用脚本调试（Internet Explorer）”和“禁用脚本调试（其他）”选项前面的对勾去掉，点击确定，设置成功。

3.9K2 0

js获取网页屏幕可视区域高度

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth...==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console...以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗口可视区域（不包括滚动条）和滚动条位置的代码： ? ?...1 // 获取浏览器窗口的可视区域的宽度 2 function getViewPortWidth() { 3 return document.documentElement.clientWidth...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8

9.5K1 0

js页面的弹框怎么关闭啊

1、单纯的关闭 window.opener.location.reload(); //刷新父窗口中的网页 window.close();//关闭当前窗窗口 2、...

14.3K4 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

8.1K3 0

vue.js数据渲染完成后，获取页面高度问题

遇到的问题通过接口请求出来的数据，渲染到页面上，再获取元素内容高度的时候，高度为0 为什么高度会是0 因为我是在接口返回数据后，就直接在回调函数里获取了元素内容的高度。...虽然数据获取到了，但是页面还没有及时的渲染出来，所以获取的内容高度就为0了然后我就延迟2秒获取内容高度，发现内容高度是渲染完成后的正常高度，但是这样肯定是不行的。...部分代码示例一： mounted() { this.getDataList(); //调用方法 }, methods: { //获取数据列表 getDataList() {...1&keywords=') .then(function (res) { that.dataList = res.data.data; //将获取到的数据赋值给...(() => { console.log(content.offsetHeight); // 600 }) } }, methods: { //获取数据列表

6.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭