window.innerHeight ie8 替代方案答案

【问题标题】：window.innerHeight ie8 alternativewindow.innerHeight ie8 替代方案
【发布时间】：2012-04-16 11:28:05
【问题描述】：

我有一些依赖于window.innerHeight 的计算。但是我发现这在 IE9 之前的任何 IE 中都不可用。我看过的所有其他选项甚至都没有接近我使用window.innerHeight时得到的数字。

有人可以解决吗？

【问题讨论】：

这个问题已经在jQuery、Prototype、YUI、Closure或any of several others等几个库中得到解决。与其自己解决问题，不如考虑利用其他人的工作，这样您就可以专注于编写特定于您需求的代码。或者，即使您不使用该库，也可以看看他们是如何做到的并使用该代码。
前段时间已经回答过了。检查this
除了 iOS $(window).height() 和 window.innerHeight 返回不同的值。所以我想说这个问题还没有在这样的库中得到解决，并且值得询问。

标签： javascript jquery internet-explorer-8

【解决方案1】：

你可能想试试：

document.documentElement.clientHeight;

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

$(window).height();

【讨论】：

+1 document.body.clientHeight 在所有情况下都不适用于我，但我发现$(window).height() 是可靠的
Dan 是对的，真正等同于$(window).height() 的是document.documentElement.clientHeight，而不是document.body.clientHeight。这是测试小提琴：jsfiddle.net/tzdcx/1 或 jsfiddle.net/tzdcx/1/show（适用于 IE7 及更高版本）

【解决方案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));

【讨论】：

这非常有用！谢谢！

【解决方案3】：

在您的document.ready 中使用以下内容并明确定义innerHeight。

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

【讨论】：

【解决方案4】：

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

window.outerHeight;

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

document.body.clientHeight;

或

document.body.offsetHeight;

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

这是没有栏的窗口的高度。

window.innerHeight;

获取可见文档区域高度和没有条形区域高度的窗口的jQuery方法..：

$(window).height();

或

$(window).outerHeight();

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

$(document).height();

或

$(document).outerHeight();

就这些了，希望对你有帮助:)

【讨论】：

【解决方案5】：

我搜索是因为这里发布的功能似乎都不起作用，我总是得到 windowviewheight 而不是文档全高...

这适用于我测试过的所有浏览器...也 iexplore 8:

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);

【讨论】：

所有其他方法都失败了，这是为我准备的。谢谢！