窗口内部高度的IE8替代方案

Question

我有一些依赖于window.innerHeight的计算。但是，我发现在IE9之前的任何IE版本中都无法使用该属性。我查看了所有其他选项，但是没有一个能够接近使用window.innerHeight时得到的值。

有人知道解决方法吗？

- Theo Kouzelis

---

这个问题已经在几个库中得到解决，例如 jQuery, Prototype, YUI, Closure 或 其他一些库。与其自己去解决它，你可以考虑利用别人的工作，这样你就可以专注于编写特定于你需求的代码。或者，看看他们是如何做的，即使你不使用该库，也可以使用那段代码。 - T.J. Crowder

这个问题以前已经有人回答过了。请查看 这里。 - AurA

除了iOS的$(window).height()和window.innerHeight返回不同的值之外，我认为这些库中的问题尚未解决，值得进一步探讨。 - cjbarth

Answer 1

你可能想要尝试：

document.documentElement.clientHeight;

或者可以使用jQuery的.height()方法：

$(window).height();

- Sandeep Pathak

---

"document.body.clientHeight" 在某些情况下对我无效，但是我发现 "$(window).height()" 是可靠的。 - BornToCode

丹是正确的，与$(window).height()真正相等的是document.documentElement.clientHeight，而不是document.body.clientHeight。这里有一个测试fiddle：http://jsfiddle.net/tzdcx/1/或http://jsfiddle.net/tzdcx/1/show（可在IE7及以上版本中工作）。 - Stano

Answer 2

我为IE8和其他浏览器制作了一个简单的shim:

• window.innerWidth
• window.innerHeight
• window.scrollX
• window.scrollY
• document.width
• document.height

559字节

(function(d,b){var c=b.documentElement;var a=b.body;var e=function(g,h,f){if(typeof g[h]==="undefined"){Object.defineProperty(g,h,{get:f})}};e(d,"innerWidth",function(){return c.clientWidth});e(d,"innerHeight",function(){return c.clientHeight});e(d,"scrollX",function(){return d.pageXOffset||c.scrollLeft});e(d,"scrollY",function(){return d.pageYOffset||c.scrollTop});e(b,"width",function(){return Math.max(a.scrollWidth,c.scrollWidth,a.offsetWidth,c.offsetWidth,a.clientWidth,c.clientWidth)});e(b,"height",function(){return Math.max(a.scrollHeight,c.scrollHeight,a.offsetHeight,c.offsetHeight,a.clientHeight,c.clientHeight)});return e}(window,document));

关于更新，请查看此代码片段：yckart/9128d824c7bdbab2832e

(function (window, document) {

  var html = document.documentElement;
  var body = document.body;

  var define = function (object, property, getter) {
    if (typeof object[property] === 'undefined') {
      Object.defineProperty(object, property, { get: getter });
    }
  };

  define(window, 'innerWidth', function () { return html.clientWidth });
  define(window, 'innerHeight', function () { return html.clientHeight });

  define(window, 'scrollX', function () { return window.pageXOffset || html.scrollLeft });
  define(window, 'scrollY', function () { return window.pageYOffset || html.scrollTop });

  define(document, 'width', function () { return Math.max(body.scrollWidth, html.scrollWidth, body.offsetWidth, html.offsetWidth, body.clientWidth, html.clientWidth) });
  define(document, 'height', function () { return Math.max(body.scrollHeight, html.scrollHeight, body.offsetHeight, html.offsetHeight, body.clientHeight, html.clientHeight) });

  return define;

}(window, document));

- yckart

---

这非常有用！谢谢！ - Luc

Answer 3

在您的document.ready中使用以下内容，并显式定义innerHeight。

window.innerHeight = window.innerHeight || document.documentElement.clientHeight

- Akshay

Answer 4

Javascript获取完整窗口高度的方法：

window.outerHeight;

Javascript获取完整文档高度的方法：

document.body.clientHeight;

或者

document.body.offsetHeight;

Javascript方法获取可见文档区域高度：

这是没有滚动条的窗口高度。

window.innerHeight;

获取可见文档区域高度和没有滚动条的窗口区域高度的jQuery方法:

$(window).height();

或者

$(window).outerHeight();

jQuery获取完整文档高度的方法：

$(document).height();

或者

$(document).outerHeight();

就这些，希望对您有所帮助 :)

- Max Leps

Answer 5

我继续搜索，因为这里发布的所有函数都似乎不能正常工作，我总是得到窗口视图高度而不是文档的完整高度...

在我测试过的所有浏览器中都可以运行...包括IE8：

var D = document;
var myHeight = Math.max(
    D.body.scrollHeight, D.documentElement.scrollHeight,
    D.body.offsetHeight, D.documentElement.offsetHeight,
    D.body.clientHeight, D.documentElement.clientHeight
);

alert(myHeight); 

- scorp

---

当所有其他方法都失败时，这个对我起了作用。谢谢！ - Michael Cordingley