使用javascript检测IE浏览器窗口是否有滚动条（window.open）

Question

当我调用window.open时，可以包含一系列的参数。其中之一是scrollbars，可以设置为“yes”或“no”。

当我在子窗口中放置javascript时，javascript需要检测窗口打开时是否设置了scrollbars为yes或no。我想知道窗口默认是否启用了滚动条。

我只关心在IE中如何实现。如何检查？window.scrollbar在IE中不起作用。

我该怎么做？要非常清楚，我不是在谈论div溢出，而是在谈论窗口的scrollbar属性。

编辑：
- 我在IE中，因此window.scrollbars/this.scrollbars将不会返回任何内容。
- 窗口的滚动条存在于body之外。
- 查看文档的宽度将告诉我有关文档的信息。我甚至可以确定文档中是否有滚动条。这不会告诉我有关窗口本身的任何信息。
- 窗口滚动条的宽度因当前选择的Windows桌面主题而异，出于美学原因。

- diadem

---

我对你为什么需要知道这个很感兴趣？如果你解释一下使用场景，可能会有更好的解决办法。 - Paul Manzotti

@Paul Manzotti：我有一个根据窗口主体大小调整窗口大小的方法。IE报告窗口的总期望宽度，不包括滚动条。调整大小方法会更改宽度考虑到滚动条。因此，它可能会说期望宽度为100，但您需要调整到108才能使其正常工作（或更多，具体取决于当前选择的窗口主题，这会影响滚动条宽度。例如，Vista主题的滚动条比xp的宽）。如果没有滚动条，则无需添加此宽度以正确调整大小。 - diadem

我想我的问题是为什么滚动条的开启或关闭会有所不同？难道你没有控制吗？ - Paul Manzotti

@Paul Manzott：由div引起的滚动条和附加到窗口本身的滚动条都可能存在，也可能不存在。 div滚动条可以通过javascript报告并通过overflow / whatever进行操作。 窗口上的滚动条是由window.open创建的。 父页面创建了窗口。 有时它使用滚动条，有时不使用。 当子窗口打开时，它有自己的html和javscript。 当我在子窗口中时，我需要知道是否存在滚动条。 父级曾经知道，但我现在不确定如何利用这一点。 - diadem

我也不想依赖于查看父级元素的值，因为这意味着如果其他人将我的页面作为窗口打开，我将无法获取适当的值。 我不喜欢依靠假设。 - diadem

+1 因为这是一个好问题。找到实际窗口宽度并不容易，而不仅仅是 document.documentElement.clientWidth。 - Stephano

Answer 1

在打开子窗口的脚本中（其中您设置了scrollbars = yes或no的窗口），添加一个窗口级变量，如果scrollbars = yes，则为true，如果为no，则为false。

然后在子窗口的脚本中，查找已从self.opener.myWindowLevelVariable设置的值。

您还可以命名空间变量。重要的部分是self.opener或window.opener（如果您喜欢）。

更新：

针对您关于不想在父级中使用变量的更新...那么请反转我的初始建议。在创建子项时将变量放入子项中。

父级：

var scrollwindow = window.open("file.htm", "anotherwindow", "width=400,height=250,scrollbars=no");
scrollwindow.hasScrollbars = false;

孩子：

alert(hasScrollbars);

如果您想处理直接打开子窗口的情况，那么就会变得更有趣...

子窗口：

try {
    // do something with hasScrollbars
    // If it isn't true or false, ie undefined, using it will throw you into the catch.
    alert(hasScrollbar);
} catch (e) {
    // scrollbars weren't explicitly added or forbidden, so they'll automatically
    // show up if the content is larger than the window. In this case, use a
    // scrollbar sniffing technique.
    var hasVerticalScrollbar = document.body.scrollHeight > document.body.clientHeight;
    var hasHorizontalScrollbar = document.body.scrollWidth > document.body.clientWidth;
}

滚动条嗅探：我认为这就是Stephano想要的。他走在了正确的轨道上。但是要结合使用clientWidth、scrollWidth、clientHeight和scrollHeight。来自怪异模式：

如果元素没有滚动条，scrollWidth/Height应该等于clientWidth/Height。

当元素没有滚动条时，IE会使scrollHeight等于内容实际高度，而不是元素的高度。scrollWidth是正确的，除了IE8，它偏差5个像素。

因此，你需要稍微调整一下滚动条嗅探部分以适应IE，但这是基本思路。

- DaveS

---

非常感谢您的详细发布。我将能够在周一早上进行测试。如果我没有及时“标记为答案”，我会给您点赞以确保您得到信用。 - diadem

Answer 2

使用这个小技巧，您可以在IE中确定窗口是否具有可见滚动条：

//You'll have to modify this so as not to do it unless your user is running IE
window.attachEvent('onload', getChrome);

function getChrome() {
    //read the window width and height
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;

    //set the window to that size
    window.resizeTo(w, h);

    //read the window width and height again
    var newW = document.documentElement.clientWidth;
    var newH = document.documentElement.clientHeight;

    //calculate the difference
    var diffX = w - newW;
    var diffY = h - newH;

    //set the window back to what it was
    window.resizeBy(diffX, diffY);

    alert('diffX: ' + diffX + '\ndiffY: ' + diffY);

    //If diffX is larger than 10 (in Vista and Windows 7, the borders are 5px each)
    //then you're scrollbar is visible.
}

- Gabriel McAdams

---

这非常聪明，尽管在技术上最复杂。看起来我按“标记为答案”的时间晚了几秒钟 :-/ 它自动标记，因为我的时间已经过期了，没有我的干预。 - diadem

记录一下，这是我使用的代码，除了一个例外情况，它可以正常工作 - 如果用户按住鼠标左键，window.resizeby将不会触发。我们添加了一些解决方法来解决这个限制，并且一切都按预期运行。 - diadem

Answer 3

这有点取巧，但似乎可以工作：

function has_scrollbar() { 
    if (document.documentElement.clientHeight < document.body.offsetHeight) {
        alert("vertical scrollbar");
    } else {
        alert("no vertical scrollbar");
    }
}

你可以检查offsetHeight（HTML内容）的大小，并将其与documentElement.clientHeight（IE窗口高度）进行比较。当然，你也可以用“height”替换“width”。

希望这能帮到你！

- Stephano

---

不幸的是，这在IE中不起作用。window.scrollbars和this.scrollbars不受IE支持。 - diadem

啊，太棒了。你总是可以信赖IE :) 。你用的是哪个版本？ - Stephano

IE7或IE8在IE7兼容模式下运行。IE8标准模式在某些类型的有效HTML上会出现严重崩溃（由两个样式表错误引起的冲突命令），因此我们总是强制使用兼容模式。 - diadem

编辑了代码。如果将其放在“弹出窗口”中，它应该会告诉您是否有垂直滚动条。 - Stephano

很抱歉，这只告诉我文档的宽度。它没有考虑到IE左侧的那个小灰色条，该条允许您调整窗口大小或右侧的滚动条。当您调用window.resize时，它会考虑这两个因素，因此我需要知道实际窗口宽度，而不仅仅是应用程序添加填充之前窗口内部文档的宽度。 - diadem

Answer 4

您可以检查文档高度，然后检查窗口高度，如果文档高度更大，则会出现滚动条。

但是，因为IE总是显示滚动条（即使您没有任何内容可滚动），您可能希望为body标签设置overvlow:auto。

- Ionuț Staicu

---

正如我的原始帖子和链接的网站所述，IE不直接支持窗口高度。它告诉你body的高度，这不是我要问的。body有滚动条和窗口有滚动条之间有区别。它们都可以有滚动条或没有滚动条。我不关心body，我只关心窗口。这并不总是开启的。它是由window.open设置的，无法更改。 - diadem

我猜如果文档高度大于窗口高度，那么你就不能滚动... - Ionuț Staicu

Answer 5

试试这个

scrollwindow = window.open("file.htm", "anotherwindow", "width=400,height=250");
  if (scrollwindow.scrollbars) 
  {
alert("Yes we have  scrollbars");
  }
 else 
{
    alert("Sorry doesnt support scrollbars");
  }

- streetparade

---

虽然这解释了如何从父窗口检查，但子窗口如何检查呢？我说的是在file.htm中存在的JavaScript。 - diadem