How to do window.open with no scrollbars in Google Chrome

Question

The following code opens the new window without scrollbars in Firefox, IE and Opera.

    var options = {
        height: 300, // sets the height in pixels of the window.
        width: 300, // sets the width in pixels of the window.
        toolbar: 0, // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.
        scrollbars: 0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.
        status: 0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.
        resizable: 1, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.
        left: 0, // left position when the window appears.
        top: 0, // top position when the window appears.
        center: 0, // should we center the window? {1 (YES) or 0 (NO)}. overrides top and left
        createnew: 0, // should we create a new window for each occurance {1 (YES) or 0 (NO)}.
        location: 0, // determines whether the address bar is displayed {1 (YES) or 0 (NO)}.
        menubar: 0 // determines whether the menu bar is displayed {1 (YES) or 0 (NO)}.
    };

    var parameters = "location=" + options.location +
                     ",menubar=" + options.menubar +
                     ",height=" + options.height +
                     ",width=" + options.width +
                     ",toolbar=" + options.toolbar +
                     ",scrollbars=" + options.scrollbars +
                     ",status=" + options.status +
                     ",resizable=" + options.resizable +
                     ",left=" + options.left +
                     ",screenX=" + options.left +
                     ",top=" + options.top +
                     ",screenY=" + options.top;

    // target url
    var target = 'some url'  

    popup = window.open(target, 'popup', parameters);

In Google Chrome the new window still has the scrollbars. Any ideas to make it work?

Answer 1

It has scrollbars because it needs scrollbars. Your content may be too big to be displayed without scrollbars. Consider wrapping it in an element (a div for example) with style="overflow: hidden".

Answer 2

You shouldn't remove scrollbars. If I have my font setting insanely large and didn't know of other ways to scroll other than scrollbars, I won't be able to actually view the content of the popup. Same goes for overflow: hidden. Just don't do it, as there is no way to make sure the content of the page will fit in an exact size. Scrollbars don't appear by default if the page isn't overflowing, so your problem is most likely that your popup is too small for the page you're loading in it. Also, most people hate popups, so you may want to try a less-intrusive approach, such as small yet exuberantly colored box to grab the user's attention.

Answer 3

This style should do the trick, add it to the opened window document:

body{ overflow-x:hidden;overflow-y:hidden; }

Answer 4

Google Chrome goes the extra mile for users by automatically capturing many popups and suppressing them into a notification area in the bottom-right corner of the browser, giving the user the option to manually launch them or not. Additionally Google pushes updates to browsers regularly and if your popup isn't captured by Chrome now it might be in the future.

Also many tools on systems nowadays prevent or block popups so the odds are against your popup on many levels.

Recommendation

It's recommended to mock a popup window using the page DOM (e.g. using a DIV styled to look like a popup window). Many sites are moving this way to get past popup blockers.

There are many examples on the Internet. For example using JavaScript to create a Popup, using jQuery API to create a popup jQuery is a JavaScript layer on top of JavaScript and will give you some implicit cross-browser compatibility features.

You will be able to have scrolling inside the mocked popup using CSS

div {
width:150px;
height:150px;
overflow:scroll;
/* etc... */
}

or to suppress it overflow:hidden;