Detect if window has scrollbar in IE using javascript (window.open)

Question

When i call window.open, I can include a list of parameters. One of these paramaters is scrollbars, which can be set to yes or no.

When I put javascript in the child window, the javascript needs to detect if scrollbars were set to yes or no when the window was opened. I want to know if the window has scrollbars enabled by default or not.

I only care about doing this in IE. How do I check? window.scroolbar does not work in IE.

How do I do this? To be perfectly clear, I'm not talking about div overflows, I'm talking about the scrollbar property of the window.

edit:
- I am in IE so window.scrollbars/this.scrollbars won't return anything
- The windows scrollbars exist outside the body.
- Looking at the document's width will tell me about the document. I can even figure out if there are scrollbars in the document. This will not tell me anything about the window itself.
- The width of the window's scrollbar changes dependent on what the currently selected Windows Desktop Theme is, for ascetic reasons.

Answer 1

Try this

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

Answer 2

This is a little hacky, but it seems to work:

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

You check the size of the offsetHeight (html content) and compare it with the documentElement.clientHeight (window height for IE). You can switch out "width" for "height", obviously.

Hope this helps!

Answer 3

Alongside your script that opens the child window (the one where you set scrollbars=yes or no), add a window-level variable that's true if scrollbars=yes, or false if no.

Then in your child window's script, you look up the value that's been set from self.opener.myWindowLevelVariable.

You could also namespace the variable. The important part is self.opener or window.opener if you prefer.

Update:

In response to your update about not wanting to use a variable in the parent...Then reverse my initial suggestion. Put the variable in the child when it's created.

Parent:

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

Child:

alert(hasScrollbars);

If you want to handle the case where the child window is opened directly, then it gets more interesting...

Child:

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

Scrollbar sniffing: I think this is what Stephano was going for. He was on the right track. But use clientWidth, scrollWidth, clientHeight, and scrollHeight in combination. From quirks mode:

If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.

When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.

So, you'll have to adjust the scrollbar sniffing part a bit for IE, but that's the basic idea.

Answer 4

You can determine if the window has a visible scrollbar in IE by using this little JavaScript trick:

//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.
}

Answer 5

You can check document height, then check window height and if document height is a bigger number, then you have scrollbars.

However, because IE will display always scrollbars (even if you don't have anything to scroll) you may want to set overvlow:auto for body tag.