Html 在 window.open 之后使用 scrollbars=no 启用浏览器滚动条

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16562264/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:23:27  来源:igfitidea点击:

Enabling browser scroll bars after window.open with scrollbars=no

javascripthtmlcross-browser

提问by Dan Cook

I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:

我有一个现有链接,它在禁用滚动条的新窗口中打开一个网页,如下所示:

<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>

For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.

为了论证起见,我无法更改此 window.open() 代码。我需要在窗口打开后启用滚动条。

This works in IE using the following code:

这在 IE 中使用以下代码有效:

 <script type="text/javascript">
    onload=function()
        {
    enableScrolling();
    }
    function enableScrolling()
    {
      document.body.scroll = "yes"; // IE 
    }
 </script> 

However this does not work in FireFox or Chrome.

但是,这在 FireFox 或 Chrome 中不起作用。

According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)

根据这个页面,以下代码应该适用于 FireFox 和 Chrome,但它不适用(也许这适用于早期版本?)

      document.documentElement.style.overflow='scroll';
      document.body.style.overflow='scroll';

Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?

有谁知道在禁用滚动条的情况下打开窗口后是否可以在 FireFox 和 Chrome 中启用滚动条?

回答by Toteb99

Just like Nikunj Soni said, setting a heightattribute to your bodytag will help you solve the problem in every browser. What I will do differently is the following:

正如 Nikunj Soni 所说,heightbody标签设置属性将帮助您解决每个浏览器中的问题。我将做的不同之处如下:

Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.

我不会设置固定高度,而是设置height:100%,这使您能够以与原始尺寸不同的尺寸打开弹出窗口。

<body style="overflow:auto; height:100%;">
        The rest of your HTML code   
</body>

This is also not the best solution, but you are actually removing the restictions you get from the link.

这也不是最好的解决方案,但您实际上是在消除从链接中获得的限制。

Hope you find this answer helpful.

希望你觉得这个答案有帮助。

回答by norbi771

Since you add js for IE I assume you can change the way displayed page works. In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;

由于您为 IE 添加了 js,我假设您可以更改显示页面的工作方式。在这种情况下,我会尝试将打开的窗口的内容放在 div 中,并将其样式设置为:height: 200px; 溢出:自动;

回答by Nikunj Soni

Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.htmlin a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.

实际上我尝试过使用不同的浏览器,如果您对高度有固定的要求,您可以做的是将example.html 的所有内容包装在一个特定的 div 中,并附加 css 如overflow:auto;height:200px. 我将向您展示整个代码。

<body>
<div style="overflow:auto;height:200px;">
    Your HTML code       
</div>
</body>

put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.

将其放入example.html。您可以从代码中获得的高度window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");

This is not the the actual solution but it will solve your problem in every browser.

这不是实际的解决方案,但它会在每个浏览器中解决您的问题。

Hope this help.

希望这有帮助。