HTML 有问题吗？滚动条未通过 window.open 出现答案

【问题标题】：Problem with HTML? Scrollbars Not Appearing via window.openHTML 有问题吗？滚动条未通过 window.open 出现
【发布时间】：2010-11-08 03:59:54
【问题描述】：

我有一个 VB.NET Web 应用程序，当用户单击链接以查看一些外部表格数据时，我正在打开一个窗口。我要显示的数据肯定需要垂直滚动条才能看到所有内容...由于某种原因，我无法在新窗口加载时显示垂直滚动条。

这是打开窗口的JS：

function showDataTable(id, type) {
var pageUrl = "queries/ReportData.aspx";   
windowHandle = window.open(pageUrl, "FarmQuery", 'resizable=yes,scrollbars=yes');
windowHandle.focus();
}

正在打开的窗口对应的Page_Load方法：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim db As New UtilDb
    Dim errMsg As String = ""

    If (Not Page.IsPostBack) Then
        db.OpenGeoDb(MyGlobals.GeodataServiceName, errMsg)
        LoadFarmInfo(db, errMsg)
        LoadQueryData(db, errMsg)
        db.CloseGeoDb()
    End If
End Sub

而且我添加了它的价值样式=“溢出：滚动；” 到包含数据表的div。

似乎数据表是在“页面”的其余部分构建完成后呈现的。有什么建议吗？

编辑

问题出现在 Firefox 和 IE 中。我将 JS 中的窗口参数参数从 'resizable=yes,scrollbars=yes' 修改为 'resizable=yes,scrollbars=yes,toolbar=yes' 并确实显示了工具栏，这表明这些选项正在“工作”。

很遗憾，我无法发布 HTML。

编辑

这是示例 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
    Farm Query
</title><link href="../Default.css" type="text/css" rel="stylesheet" /><link     href="ReportData.css" type="text/css" rel="stylesheet" /></head>
<body>
    <form name="form1" method="post" action="ReportData.aspx?wfpId=DES-046&amp;type=1" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="#" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
    }
}
//]]>
</script>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKP2r/ZCgLbzub6CgKJ+/qJC4VfHXBxZJkelz+i1sSmIFdWB5tZ" />
</div>
    <div style="overflow: auto;">

<table class="dxgvControl" cellspacing="0" cellpadding="0" id="FarmerInfoGridView" border="0" style="width:600px;border-collapse:collapse;border-collapse:separate;">
<tr>
    <td><table id="FarmerInfoGridView_DXMainTable" class="dxgvTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;empty-cells:show;">
        <tr id="FarmerInfoGridView_DXDataRow0" class="dxgvDataRow">
            <td id="FarmerInfoGridView_tcrow0" colspan="7" style="border-right-width:0px;border-bottom-width:0px;">

                    <table width="100%" cellpadding="5" cellspacing="5">
                        <tr>
                            <td class="keyDescription">WFP ID:</td>
                            <td>asdf</td>
                        </tr>
                        <tr>
                            <td class="keyDescription">Name:</td>

                            <td>Name, Name</td>
                        </tr>
                        <tr>
                            <td class="keyDescription">Company Name:</td>
                            <td>Acme</td>
                        </tr>
                        <tr>

                            <td class="keyDescription">Address:</td>
                            <td>123 Lotus Lane</td>
                        </tr>
                        <tr>
                            <td class="keyDescription">City/State:</td>
                            <td>NY, NY</td>
                        </tr>

                        <tr>
                            <td class="keyDescription">Zip:</td>
                            <td>11111</td>
                        </tr>
                    </table>
            </td>
        </tr>
    </table><img id="FarmerInfoGridView_IADD" src="#" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="FarmerInfoGridView_IADU" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="FarmerInfoGridView_IDHF" src="/SAM_Project/WebResource.axd" alt="Hide" style="border-width:0px;position:absolute;visibility:hidden;" /><div id="FarmerInfoGridView_LP" align="center" style="left:0px;top:0px;z-index:30000;display:none;">

        <table class="dxgvLoadingPanel" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
            <tr>
                <td class="dx"><img src="/SAM_Project/WebResource.axd" alt="" align="middle" style="border-width:0px;" /></td><td class="dx" style="padding-left:0px;">Loading&hellip;</td>
            </tr>
        </table>
    </div><div id="FarmerInfoGridView_LD" class="dxgvLoadingDiv" style="display:none;z-index:29999;position:absolute;">

    </div><input type="hidden" name="FarmerInfoGridView$DXSelInput" id="FarmerInfoGridView_DXSelInput" /><table id="FarmerInfoGridView_DXStyleTable" border="0" style="display:none;">
        <tr>

            <td></td>
        </tr><tr class="dxgvEditingErrorRow">
            <td class="dxgv" colspan="7" style="border-right-width:0px;"></td>
        </tr><tr class="dxgvSelectedRow">
            <td></td>
        </tr><tr class="dxgvFocusedRow">
            <td></td>
        </tr><tr class="dxgvFocusedGroupRow">
            <td></td>

        </tr><tr class="dxgvDataRow">
            <td></td>
        </tr>
    </table><input type="hidden" name="FarmerInfoGridView$CallbackState" id="FarmerInfoGridView_CallbackState" value="#" /></td>
</tr>
</table><script id="dxss_27477558" type="text/javascript">
<!--

var dxo = new ASPxClientGridView('FarmerInfoGridView');
window['FarmerInfoGridView'] = dxo;
dxo.callBack = function(arg) {         WebForm_DoCallback('FarmerInfoGridView',arg,aspxCallback,'FarmerInfoGridView',aspxCallbackError,true);     };
dxo.callBacksEnabled=true;
dxo.pageRowCount=1;
dxo.pageRowSize=10;
dxo.selectedWithoutPageRowCount=0;
dxo.visibleStartIndex=0;
dxo.focusedRowIndex=-1;
dxo.allowFocusedRow=false;
dxo.allowMultiSelection=false;
dxo.isColumnsResizable=false;
dxo.isVerticalScrolling=false;
dxo.isHorizontalScrolling=false;
dxo.isMainControlResizable=false;
dxo.callbackOnFocusedRowChanged=false;
dxo.callbackOnSelectionChanged=false;
dxo.autoFilterDelay='1200';
dxo.ClearColumns();
dxo.CreateColumn('',0,'WFP_ID',1);
dxo.CreateColumn('',1,'Last_Name',1);
dxo.CreateColumn('',2,'First_name',1);
dxo.CreateColumn('',3,'Farm_Name',1);
dxo.CreateColumn('',4,'Address',1);
dxo.CreateColumn('',5,'City_State',1);
dxo.CreateColumn('',6,'Zip',1);
dxo.InlineInitialize();

//-->
</script>

    <table class="dxgvControl" cellspacing="0" cellpadding="0" id="AnimalGridView" border="0" style="width:600px;border-collapse:collapse;border-collapse:separate;">
<tr>

    <td><table id="AnimalGridView_DXMainTable" class="dxgvTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;empty-cells:show;">
        <tr id="AnimalGridView_DXDataRow0" class="dxgvDataRow">
            <td id="AnimalGridView_tcrow0" colspan="43" style="border-right-width:0px;border-bottom-width:0px;">
        <table cellpadding="5" cellspacing="5" width="100%" id="rounded-corner">
            <tr>
                <th colspan="8" class="tableHeader">Animal Inventory</th>
            </tr>
            <tr>

                <td colspan="2">Updated:</td>
                <td colspan="2">11/14/2007</td>
                <td colspan="2">Total AU:</td>
                <td colspan="2">0</td>

            </tr>
            <tr>
                <td>Mature Dairy</td>

                <td>0</td>
                <td>Dairy Heifers</td>
                <td>0</td>
                <td>Veal</td>
                <td>0</td>
                <td>Beef</td>

                <td>0</td>
            </tr>
            <tr>
                <td>Calves</td>
                <td>0</td>
                <td>Bulls</td>
                <td>0</td>

                <td>Ducks</td>
                <td>0</td>
                <td>Elk</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Sheep</td>

                <td>0</td>
                <td>Lambs</td>
                <td>0</td>
                <td>Geese</td>
                <td>0</td>
                <td>Buffalo</td>

                <td>0</td>
            </tr>
            <tr>
                <td>Goats</td>
                <td>2</td>
                <td>Kids</td>
                <td>0</td>

                <td>Rabbits</td>
                <td>0</td>
                <td>Bears</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Pigs</td>

                <td>0</td>
                <td>Piglets</td>
                <td>0</td>
                <td>Emu</td>
                <td>0</td>
                <td>Mountain Lion</td>

                <td>0</td>
            </tr>
            <tr>
                <td>Horses</td>
                <td>0</td>
                <td>Foals</td>
                <td>0</td>

                <td>Ostrich</td>
                <td>0</td>
                <td>Guinea Pigs</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Donkeys</td>

                <td>0</td>
                <td>Oxen</td>
                <td>0</td>
                <td>Walaroo</td>
                <td>0</td>
                <td>Greenhouse</td>

                <td>0</td>
            </tr>
            <tr>
                <td>Chickens</td>
                <td>0</td>
                <td>Turkeys</td>
                <td>0</td>

                <td>Llama</td>
                <td>0</td>
                <td>Vegetables</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Ginny Hens</td>

                <td>0</td>
                <td>Peacock</td>
                <td>0</td>
                <td>Alpaca</td>
                <td>0</td>
                <td>Pheasant</td>

                <td>0</td>
            </tr>
            <tr>
                <td>Deer</td>
                <td>0</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
</td>
        </tr>
    </table><img id="AnimalGridView_IADD" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="AnimalGridView_IADU" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="AnimalGridView_IDHF" src="/SAM_Project/WebResource.axd" alt="Hide" style="border-width:0px;position:absolute;visibility:hidden;" /><div id="AnimalGridView_LP" align="center" style="left:0px;top:0px;z-index:30000;display:none;">

        <table class="dxgvLoadingPanel" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
            <tr>
                <td class="dx"><img src="/SAM_Project/WebResource.axd" alt="" align="middle" style="border-width:0px;" /></td><td class="dx" style="padding-left:0px;">Loading&hellip;</td>
            </tr>
        </table>
    </div><div id="AnimalGridView_LD" class="dxgvLoadingDiv" style="display:none;z-index:29999;position:absolute;">

    </div><input type="hidden" name="AnimalGridView$DXSelInput" id="AnimalGridView_DXSelInput" /><table id="AnimalGridView_DXStyleTable" border="0" style="display:none;">
        <tr>

            <td></td>
        </tr><tr class="dxgvEditingErrorRow">
            <td class="dxgv" colspan="43" style="border-right-width:0px;"></td>
        </tr><tr class="dxgvSelectedRow">
            <td></td>
        </tr><tr class="dxgvFocusedRow">
            <td></td>
        </tr><tr class="dxgvFocusedGroupRow">
            <td></td>

        </tr><tr class="dxgvDataRow">
            <td></td>
        </tr>
    </table><input type="hidden" name="AnimalGridView$CallbackState" id="AnimalGridView_CallbackState" value="#" /></td>
</tr>
</table><script id="dxss_1369069069" type="text/javascript">
<!--

var dxo = new ASPxClientGridView('AnimalGridView');
window['AnimalGridView'] = dxo;
dxo.callBack = function(arg) {     WebForm_DoCallback('AnimalGridView',arg,aspxCallback,'AnimalGridView',aspxCallbackError,true);     };
dxo.callBacksEnabled=true;
dxo.pageRowCount=1;
dxo.pageRowSize=10;
dxo.selectedWithoutPageRowCount=0;
dxo.visibleStartIndex=0;
dxo.focusedRowIndex=-1;
dxo.allowFocusedRow=false;
dxo.allowMultiSelection=false;
dxo.isColumnsResizable=false;
dxo.isVerticalScrolling=false;
dxo.isHorizontalScrolling=false;
dxo.isMainControlResizable=false;
dxo.callbackOnFocusedRowChanged=false;
dxo.callbackOnSelectionChanged=false;
dxo.autoFilterDelay='1200';
dxo.ClearColumns();
//-->
</script>


    <div style="margin-left: auto; margin-right: auto; width: 450px;padding: 5px 5px;"><input id="btnClose" type="submit" value="Close Window" onclick="window.close();" /></div>
</div>



<script type="text/javascript">
//<![CDATA[

WebForm_InitCallback();//]]>
</script>
</form>
</body>
</html>

【问题讨论】：

这是您主页上唯一的弹出窗口吗？我之所以问，是因为我在重用同一个弹出窗口（在您的情况下是名为 FarmQuery 的窗口）时遇到了问题，其中第一次弹出窗口时应用的设置在以后不会更改。
我见过 IE 在大表格中出现无效标记时会这样做，您使用的是哪个浏览器？
当我使用您的代码弹出我自己的 HTML 页面时，会出现滚动条。我认为@Mcbeev 可能是对的。您能否发布在弹出窗口中生成的 HTML？
我编辑了我的原始帖子以阐明更多信息。
为了它的价值，我将您的 html 示例保存到本地 html 文件并在 IE/FireFox 中打开它并获得垂直滚动条。也许是你的 CSS 导致了问题？

标签： asp.net javascript html vb.net

【解决方案1】：

window.open('CHFPhoneMonitoringChecklist.html', 'CHFwin', 'resizable=yes,location=1,status=1,scrollbars=1,width=1250,height=1000');

【讨论】：

【解决方案2】：

您的 css 文件中可能有一个 Position:fixed 会阻止滚动条出现。

【讨论】：

【解决方案3】：

如果您希望始终在页面上强制滚动条，请尝试将以下 CSS 添加到页面：

html {
overflow-y:scroll;
}

这将导致页面始终有一个垂直滚动条，无论是否需要。

您可能还想更改要使用的代码：

windowHandle = window.open(pageUrl, "FarmQuery", 'resizable=1,scrollbars=1');

因为 1=yes/true 但 yes 不一定等于 1/true（有趣的跨浏览器逻辑！）。

【讨论】：

我没有看到使用 yes 而不是 1 的问题，我能找到的所有文档都列出了有效的； w3schools.com/HTMLDOM/met_win_open.asp
resizable=1,scrollbars=1 - 有帮助！
我确认 yes|no 值在 IE10 中不起作用。为了安全起见，我们最好使用 0|1 值。感谢 Richy 和 Mateusz。

【解决方案4】：

当我尝试您提供的 html 并调整窗口大小以使内容不适合时，我在 div 上看到滚动条（看起来比整个窗口略小）。我试图删除 div 标签上的style="overflow: auto;"，滚动条只应用于整个窗口。这似乎有效，当你说滚动条不适用时，我的第一个想法是它是在你的 CSS 文件中定义的导致问题的东西。它可能在 ../Default.css 或 ReportData.css 中。

如果 div 的样式在其中一个 css 文件中设置为 overflow:hidden，您可以覆盖它以在页面的 div 标记中设置 style="overflow: visible;"。这样会导致div的内容不被裁剪，滚动由window而不是div标签来处理。

如果问题不是 div 标签，则可能是其他标签。在您的 css 文件中的任何标签上查找 overflow: hidden 以查看是否可能是问题所在。

【讨论】：

【解决方案5】：

如果内容不适合客户区，滚动条只会在您打开新窗口时出现。尝试在选项中添加“width=600,height=600”以减小窗口大小...如果没有出现任何条形，则更有可能是 CSS 问题。

删除您的“default.css”行。你还有问题吗？

【讨论】：

【解决方案6】：

这对我来说绝对是一个 CSS 问题。

尝试从弹出页面中删除指向 CSS 文件的链接，然后查看问题是否仍然存在（我打赌它不会存在）。

那么，这就变成了一个新问题：什么 CSS 可以导致滚动条在页面上消失？

body 上的overflow: hidden; 规则很可能是罪魁祸首。

【讨论】：

【解决方案7】：

您是否尝试过将主浏览器窗口的大小调整到与弹出窗口大致相同的大小并直接导航到您将在弹出窗口中显示的页面？直接加载页面时会出现滚动条吗？弹出窗口可能是一个红鲱鱼。

【讨论】：

是的，我已经尝试过这样做，但滚动条仍然没有出现。
所以问题出在返回的页面上。提供一个演示该问题的 HTML 示例确实会有所帮助，否则人们将不得不疯狂推测以找出阻止滚动条出现的原因。（更新您的问题标题以反映这一点也可能需要支付。）