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

Question

When I call window.open, I can include a list of options. One such parameter is the scroll bar, which can be set to yes or no.

When I put javascript in a child window, javascript should determine if the scroll bars were set to yes or no when the window was open. I want to know if a window is enabled by default scrolling or not.

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

How can I do it? To be completely clear, I'm not talking about div overflow, I'm talking about the scroll property in the window.

Editing:
- I'm in IE, so window.scrollbars / this.scrollbars will not return anything - - Window scrollbars exist outside the body.
- Looking at the width of the document, I will talk about the document. I can even figure out if the document has scrolling. This will not tell me anything about the window itself.
- The width of the scroll bar of the window varies depending on which theme of the Windows desktop is currently selected for ascetic reasons.

Answer 1

You can determine if a window has a visible scrollbar in IE 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 2

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

Then in your child’s script window you will see the value that was set from self.opener.myWindowLevelVariable .

You can also skip this variable. The important part is self.opener or window.opener, if you prefer.

Update:

In response to your update that you do not want to use the variable in the parent ... Then cancel my original sentence. Place the variable in the child when creating it.

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 when the child window opens directly, then it becomes 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; } 

Sniffing the scroll: I think this is what Stefano walked on. He was on the right track. But use clientWidth, scrollWidth, clientHeight and scrollHeight in combination. From quirks mode :

If the item does not have scrollbars scrollWidth / Height should be equal to clientWidth / height.

When an element has no scroll bars, IE makes scrollHeight equal to the actual height of the content; not the height of the element. scrollWidth is correct except for IE8, where its 5 pixels off.

So, you need to adjust the scroll part for IE a bit, but this is the main idea.

Answer 3

This is a bit hacky, but it works:

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

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

Hope this helps!

Answer 4

try it

 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 5

You can check the height of the document , then check the height of the window, and if the height of the document is greater, then you have scroll bars.

However, since IE will always display scroll bars (even if you have nothing to scroll), you can set overvlow:auto for the body tag.