【问题标题】:How to do window.open with no scrollbars in Google Chrome如何在 Google Chrome 中不带滚动条的 window.open
【发布时间】:2010-01-03 13:27:36
【问题描述】:

以下代码在 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);

在 Google Chrome 中,新窗口仍然有滚动条。 有什么想法让它发挥作用吗?

【问题讨论】:

    标签: javascript google-chrome popup


    【解决方案1】:

    这种风格应该可以解决问题,将其添加到打开的窗口文档中:

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

    【讨论】:

    • 我今天遇到了同样的问题,我不得不在正文和“html”元素中添加溢出:隐藏,以使滚动条在 Chrome 中消失。直到今天我才知道你可以为 html 元素添加样式。
    • 嗯,为什么不直接:body { overflow: hidden; }?
    【解决方案2】:

    您不应该删除滚动条。如果我的字体设置非常大并且不知道滚动条以外的其他滚动方式,我将无法实际查看弹出窗口的内容。 overflow: hidden 也是如此。只是不要这样做,因为没有办法确保页面的内容适合精确的大小。如果页面没有溢出,则默认情况下不会出现滚动条,因此您的问题很可能是您的弹出窗口对于您正在加载的页面来说太小了。此外,大多数人讨厌弹出窗口,因此您可能想尝试一种侵入性较小的方法,例如小而色彩鲜艳的框来吸引用户的注意力。

    【讨论】:

      【解决方案3】:

      谷歌浏览器通过自动捕获许多弹出窗口并将它们抑制到浏览器右下角的通知区域中,为用户提供了额外的帮助是否手动启动它们的选项。此外,Google 会定期向浏览器推送更新,如果您的弹出窗口现在没有被 Chrome 捕获,它可能会在将来出现。

      现在系统上的许多工具都可以防止或阻止弹出窗口,因此在许多层面上都可能不利于您的弹出窗口。

      推荐

      建议使用页面 DOM 模拟弹出窗口(例如,使用 DIV 样式使其看起来像弹出窗口)。许多网站都采用这种方式来绕过弹出窗口拦截器。

      互联网上有很多例子。例如using JavaScript to create a Popup、using jQuery API to create a popup jQuery 是 JavaScript 之上的一个 JavaScript 层,它将为您提供一些隐式的跨浏览器兼容性功能。

      您将能够使用 CSS 在模拟弹出窗口内滚动

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

      或者压制它overflow:hidden;

      【讨论】:

        【解决方案4】:

        它有滚动条,因为它需要滚动条。您的内容可能太大而无法在没有滚动条的情况下显示。考虑用 style="overflow: hidden" 将其包装在一个元素(例如 div)中。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2013-11-26
          • 1970-01-01
          • 1970-01-01
          • 2010-11-23
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-02-03
          相关资源
          最近更新 更多