草庐IT

关于 jquery：$(window).height() vs $(document).height

codeneng 2023-03-28 原文

$(window).height() vs $(document).height

我在使用

时遇到了错误高度的问题

1
$(window).height();

并得到了类似的问题
这里

就我而言，当我尝试

1
$(document).height();

它似乎返回了正确的结果

窗口高度返回 320

而文档高度返回 3552！

我也发现了这个问题

但在我的情况下，窗口已经完全加载，因为我在几次 ajax 操作后调用了高度函数

那么知道当前窗口高度的最佳方法是什么？

编辑：


  • 这是完全不同的两件事。您是否试图获取窗口、文档、视口的高度，什么？
  • $(window).height(); 是获取窗口高度的正确方法。为什么你认为这是错误的？
  • @Brad-实际上我想要我的窗口覆盖的整个高度，包括滚动区域，实际上我想使用这个数字来计算和设置我的弹出窗口的底部
  • 所以你想让你的弹出窗口离开屏幕？
  • @FelixKling - 它返回 320，但我不认为我的窗口大小是 320，因为我正在计算页面上表格的高度之一，而该表格只有 2400 像素！
  • 可见内容的大小与整个文档的大小之间存在差异。您可能正在寻找可见部分，因为您真的不希望弹出窗口出现在其他地方。
  • Document height !== window height！正如@JCOC611 所说，窗口高度是您在文档中看到的部分，而文档高度......是不言自明的。
  • @JCOC611 - 实际上，我创建了一个动态表，它可以有任意数量的行，我可以动态添加任意数量的列，在所有这些动态创建的列上单击我会显示一个弹出窗口，所以我想几乎在单击单元格，我昨天实现了这一点，但是设置了弹出窗口顶部，但是左侧弹出窗口有一些问题，所以我现在想设置弹出窗口底部，我想做类似这样的操作 popupBottom = windoHeight - cellTop
  • @FelixKling - 所以 window.height 不包括 scrollRegion？因为我确定我的窗口不仅仅是 320 大小
  • 为什么不使用 position:fixed 作为弹出位置？这样，弹出位置不会随滚动位置而变化。
  • 给我一点时间，我会尝试发布一张可以帮助我解释我的观点的图片
  • 我已经进行了编辑，就像第一张图片一样，我可以选择任意数量的团队，它会为团队添加列，第二张我可以单击任何单元格，然后会出现弹出窗口，你可以看到它是如第二个屏幕所示完美运行。唯一的问题是我使用的是相对位置，这让我的左边错了。这是我愿意转移到设置弹出窗口底部的唯一问题
  • 啊!如果我只是获得从窗口顶部设置弹出窗口顶部的方法，我的问题也可以解决，目前如果我使用 position:absolute 它从父元素获取顶部，但我想从窗口的开头，有没有办法？
  • 我的问题已经解决了使用外部和内部元素的位置:-) 感谢您的所有帮助:)

嗯，你似乎把他们俩都误认为他们做了什么。

$(window).height() 为您提供(浏览器)窗口(即视口)高度的无单位像素值。对于 Web 浏览器，此处的视口是画布的可见部分(通常小于正在呈现的文档)。

$(document).height() 返回正在呈现的文档高度的无单位像素值。但是，如果实际文档的正文高度小于视口高度，则它将返回视口高度。

希望能把事情弄清楚一点。

  • 如果一个人想要获得文档的高度，特别是如果它小于视口(例如，为了让 iframe 告诉它的父级它应该是什么大小)怎么办？ $("html").height() 跨浏览器是否可靠？
  • 我个人从不使用 $(html).height() ，因此建议使用 $(document).height() 来获取文档的高度。
  • 问题是如果窗口高度大于文档高度，则 $(document).height() 返回窗口/视口高度，而不是文档高度。在我的用例中，iframe 可能会变得更高或更短，并且需要能够告诉其父级它应该是什么高度。如果它很高然后变短，它需要能够测量小于其视口的高度。
  • 你如何解释 $(window).height() 返回一个像 3300 万像素这样的拥抱值？
  • "无单位像素值"……嗯？"像素"就是一个单位！
  • @Noldorin 我试图表达的意思(不成功？)是两个实用程序返回的值只是数字，不包含以像素为单位的单位。有趣的是，像素并不是真正意义上的单位。
  • 啊，我明白你现在的意思了。好吧，即使根据技术定义，像素仍然是一个单位，但那是语义......

这解决了我

1
2
var width = window.innerWidth;
var height = window.innerHeight;

AFAIK $(window).height(); 返回窗口的高度，$(document).height(); 返回文档的高度

  • 重言式。 $(window).height() 只是用于"返回窗口高度"的计算机 javascript 语言。你刚才用人类语言说了那行代码。我没有投反对票，因为我不相信。
  • 它们的名称已经写在函数中，您只需将它们命名为相同。但是，最好解释一下窗口和文档是什么。

jQuery $(window).height(); 或 $(window).width(); 只有当您的 html 页面文档类型为 html

时才能完美运行

1
2
3
<!DOCTYPE html>
<html lang="en">
...

  • 解决了我在 Firefox 上的问题 - 版本。至少在 88 中，如果未设置 <!DOCTYPE html>，则 $(window).height() 返回正文的高度。

$(document).height:如果您的设备 height 更大。您的页面没有任何滚动条；

$(document).height: 假设您没有滚动并返回此 height;

$(window).height: 在您的设备上返回您的页面 height。

你需要知道文档和窗口是什么意思。

  • window 对象表示浏览器中打开的窗口。单击此处
  • Document 对象是文档树的根。单击此处
    • heightdocumentsectionlijquery

    有关关于 jquery：$(window).height() vs $(document).height的更多相关文章

    1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

      我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

    2. ruby-on-rails - Railstutorial : db:populate vs. 工厂女孩 - 2

      在railstutorial中，作者为什么选择使用这个(代码list10.25):http://ruby.railstutorial.org/chapters/updating-showing-and-deleting-usersnamespace:dbdodesc"Filldatabasewithsampledata"task:populate=>:environmentdoRake::Task['db:reset'].invokeUser.create!(:name=>"ExampleUser",:email=>"example@railstutorial.org",:passwo

    3. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

      这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

    4. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

      rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

    5. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

      之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

    6. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

      深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

    7. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

      我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

    8. arrays - Ruby 数组 += vs 推送 - 2

      我有一个数组数组，想将元素附加到子数组。+=做我想做的，但我想了解为什么push不做。我期望的行为(并与+=一起工作):b=Array.new(3,[])b[0]+=["apple"]b[1]+=["orange"]b[2]+=["frog"]b=>[["苹果"],["橙子"],["Frog"]]通过推送，我将推送的元素附加到每个子数组(为什么？):a=Array.new(3,[])a[0].push("apple")a[1].push("orange")a[2].push("frog")a=>[[“苹果”、“橙子”、“Frog”]、[“苹果”、“橙子”、“Frog”]、[“苹果”、“

    9. ruby-on-rails - 关于 Ruby 的一般问题 - 2

      我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

    10. ruby - 如何在 Ruby 中执行 Windows CLI 命令？ - 2

      我在目录“C:\DocumentsandSettings\test.exe”中有一个文件，但是当我用单引号编写命令时`C:\DocumentsandSettings\test.exe(我无法在此框中显示)，用于在Ruby中执行命令，我无法这样做，我收到的错误是找不到文件或目录。我尝试用“//”和“\”替换“\”，但似乎没有任何效果。我也使用过系统、IO.popen和exec命令，但所有的努力都是徒劳的。exec命令还使程序退出，这是我不想发生的。提前致谢。 最佳答案 反引号环境就像双引号，所以反斜杠用于转义。此外，Ruby会将空格解

    随机推荐