Javascript 如何在 Google Chrome 中不带滚动条的情况下执行 window.open
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1994945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do window.open with no scrollbars in Google Chrome
提问by Pawel Furmaniak
The following code opens the new window without scrollbarsin Firefox, IE and Opera.
以下代码在 Firefox、IE 和 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 Chromethe new window still has the scrollbars. Any ideas to make it work?
在谷歌浏览器中，新窗口仍然有滚动条。有什么想法可以让它发挥作用吗？
回答by DoctorLouie
This style should do the trick, add it to the opened window document:
这种样式应该可以解决问题，将其添加到打开的窗口文档中：
body{ overflow-x:hidden;overflow-y:hidden; }
回答by Eli Grey
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.
你不应该删除滚动条。如果我的字体设置非常大并且不知道除滚动条之外的其他滚动方式，我将无法实际查看弹出窗口的内容。也一样overflow: hidden。只是不要这样做，因为没有办法确保页面的内容适合精确的大小。如果页面没有溢出，默认情况下不会出现滚动条，因此您的问题很可能是您的弹出窗口对于您正在加载的页面来说太小了。此外，大多数人讨厌弹出窗口，因此您可能想尝试一种不那么引人注目的方法，例如小而鲜艳的颜色框来吸引用户的注意力。
回答by John K
Google Chromegoes the extra mile for users by automatically capturing many popupsand 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.
谷歌浏览器通过自动捕获许多弹出窗口并将它们隐藏在浏览器右下角的通知区域中，为用户提供了额外的帮助，让用户可以选择是否手动启动它们。此外，Google 会定期向浏览器推送更新，如果您的弹出窗口现在未被 Chrome 捕获，将来可能会被捕获。
Also many tools on systems nowadays prevent or block popups so the odds are against your popupon many levels.
现在系统上的许多工具也可以防止或阻止弹出窗口，因此在许多层面上都与您的弹出窗口相悖。
Recommendation
推荐
It's recommended to mock a popup window using the page DOM(e.g. using a DIVstyled to look like a popup window). Many sites are moving this way to get past popup blockers.
建议使用页面 DOM 模拟弹出窗口（例如，使用DIV样式看起来像弹出窗口）。许多网站正在以这种方式移动以绕过弹出窗口阻止程序。
There are many examples on the Internet. For example using JavaScript to create a Popup, using jQuery API to create a popupjQuery is a JavaScript layer on top of JavaScript and will give you some implicit cross-browser compatibility features.
网上有很多例子。例如使用 JavaScript 创建 Popup，使用 jQuery API 创建弹出窗口jQuery 是 JavaScript 之上的 JavaScript 层，将为您提供一些隐式的跨浏览器兼容性功能。
You will be able to have scrolling inside the mocked popup using CSS
您将能够使用 CSS 在模拟弹出窗口中滚动
div {
width:150px;
height:150px;
overflow:scroll;
/* etc... */
}
or to suppress it overflow:hidden;
或压制它 overflow:hidden;
回答by Fabien Ménager
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".
它有滚动条，因为它需要滚动条。您的内容可能太大而无法在没有滚动条的情况下显示。考虑将它包装在一个带有 style="overflow: hidden" 的元素（例如一个 div）中。
