如何检索用户浏览器中当前网页的高度和宽度？答案

【问题标题】：How can I retrive what height and width of a web page are currently in the user's browser?如何检索用户浏览器中当前网页的高度和宽度？
【发布时间】：2012-08-22 09:42:51
【问题描述】：

我正在尝试使用弹出式视频播放器。会使用fancybox，但它们是非商业的，我的用例相对简单。基本上我正在创建一个 div，它在黑色背景中覆盖整个页面，具有足够的不透明度以仍然可以看到所有内容。我想在此“覆盖”div 上的页面上用户当前位置（高度方面）放置一个 youtube 视频（通过 iframe 硬链接插入）。基本上，我不想将此视频放在用户必须滚动到的页面的高度位置。

我查看了 jquery 库，包括浏览器和支持，但没有看到任何值得注意的东西。有没有我错过的方法？顺便说一句，它可能是一个 Javascript 解决方案，我只是碰巧在其他所有事情上都使用了 JQuery，你知道。

编辑：

我试图将这个新的 div（包含 iframe 代码）放在用户浏览器视口当前所在的位置，而不是确定文档的高度或浏览器视口的高度。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用 $（窗口）。例如：

console.log($(window).height());
console.log($(window).width());

在调整浏览器窗口大小时尝试一下，您会看到它发生了变化。

如果要获取窗口视口滚动到的位置，请使用 $(window).scrollTop() 和 $(window).scrollLeft()。

如果要获取特定元素的位置，请使用 $("#myid").position()（相对于偏移父级）或 $("#myid")offset()（相对于文档）。

【讨论】：

嗯，实际上，这将如何帮助我确定用户的位置？这会给我浏览器视口的高度吗？但是，我需要知道浏览器视口的位置。让我看看 DOM，看看是否能找到我需要的 window 属性。谢谢。

【解决方案2】：

jquery Height Documentation

jquery Width Documentation

获取文档高度：
$(window).height();

获取文档宽度：
$(window).width();

【讨论】：

您可以使用 scrollTop() 来获取用户的垂直位置。一旦你得到了使用高度计算用户的当前位置。

【解决方案3】：

.height() 或 .outerHeight() 应该都可以工作：

http://jsfiddle.net/hL3cv/

$(window).height();
$(window).outerHeight();
$(window).width();
$(window).outerWidth();

【讨论】：

我想将 div 放置在浏览器视口已经存在的位置。这有意义吗？

【解决方案4】：

我使用PrettyPhoto。它不是太大，如果您对 JavaScript 感到满意，您可以删除任何不需要的代码以使其更加紧凑。

【讨论】：

这如何回答 OP 关于如何找到正确坐标的问题？
@Nick 感谢您的建议。如果我自己实施它有一些跨浏览器问题或者它变得太多，我会调查它。
@AresAvatar 它回答了问题背后的问题；）其他两个答案非常充分地回答了直接问题。然而，OP 说他“正在尝试有一个弹出式视频播放器”，这可能会让他不必重新发明轮子。
@thatidiotguy 如果您确实走上了 prettyPhoto 的道路，我很高兴为您拍摄专门为 Vimeo 调整的代码的精简副本。正如他们所说，它非常漂亮:)
@Nick 它可以在手机浏览器中使用吗？ iPhone 尤其令人感兴趣。