javascript - 如何允许脚本在单击链接以显示对话框后立即触发

Question

我正在开发一个 Web 应用程序，它会在单击链接后显示一个对话框。问题是使用 IE10 时对话框高度非常小，如下所示:-

现在整个问题是内部样式高度= 45px。因为如果我使用 F12 开发人员工具手动将值更改为 450px 而不是 45px，对话框将正确呈现。

在尝试了很多方法之后，唯一可行的选择是设置一个每 2 秒触发一次的计时器来重置高度，如下所示:-

var interval = null; //Defines the start interval variable

$(document).ready(function () { // jQuery needed for this
    /* People Picker Fix Starts */
    if (navigator.appVersion.indexOf("MSIE 10") > -1) { // IE 10 Specific condition for People Picker Bug
       interval = setInterval(adjustPeoplePicker, 2000);
    }
    /* People Picker Fix Ends */
});

function adjustPeoplePicker() {
    if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
        $('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
        $('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
       //clearInterval(interval);
    }
}

但我不想每 2 秒就触发一次脚本，所以我将脚本修改为仅在用户单击具有图像的链接时触发，如下所示:-

<script type= "application/javascript">
var interval = null; //Defines the start interval variable

$(document).ready(function () { // jQuery needed for this

    $('a img').on('click', adjustPeoplePicker);    /* People Picker Fix Ends */


function adjustPeoplePicker() {

    if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
        $('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
        $('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
       //clearInterval(interval);
    }

}
}});
</script>

但这行不通，高度不会改变。

所以有人可以就此提出建议吗？谢谢

编辑这是对话框标记的一部分:-

        <tbody><tr>
            <td width="16" height="16"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
            <td width="100%" height="20"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
            <td width="15" height="8"><img width="8" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
        </tr>
        <tr>
            <td width="15">&nbsp;</td>
            <td width="100%" height="20"><span><table style="width: 100%;" cellspacing="0" cellpadding="0">
    <tbody><tr style="width: 100%;">
        <td class="ms-descriptiontext" style="white-space: nowrap;"><label for="ctl00_PlaceHolderDialogBodySection_ctl07_queryTextBox"><b>Find</b>&nbsp;</label></td><td style="width: 100%;"><input name="ctl00$PlaceHolderDialogBodySection$ctl07$queryTextBox" class="ms-pickersearchbox" id="ctl00_PlaceHolderDialogBodySection_ctl07_queryTextBox" accesskey="S" style="width: 100%;" onkeydown="var e=event; if(!e) e=window.event; if(!browseris.safari &amp;&amp; e.keyCode==13) { document.getElementById('ctl00_PlaceHolderDialogBodySection_ctl07_queryButton').click(); return false; }" type="text" maxlength="1000" alwaysenablesilent="true"></td><td><div class="ms-browseimage"><input name="ctl00$PlaceHolderDialogBodySection$ctl07$queryButton" title="Search" id="ctl00_PlaceHolderDialogBodySection_ctl07_queryButton" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderDialogBodySection$ctl07$queryButton", "", true, "", "", false, false))' type="image" alt="Search" src="/_layouts/15/images/browse.png"></div></td><td><select name="ctl00$PlaceHolderDialogBodySection$ctl07$viewPicker" class="ms-pickerdropdown" id="ctl00_PlaceHolderDialogBodySection_ctl07_viewPicker">
            <option value="">List View</option>
            <option value="">Detailed View</option>

        </select></td>
    </tr>
</tbody></table></span></td>
            <td width="15">&nbsp;</td>
        </tr>
    <tr><td width="15"><img width="15" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td><td class="ms-descriptiontext"><span id="ctl00_PlaceHolderDialogBodySection_ctl09"></span></td><td width="15"><img width="15" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td></tr>
        <tr>
            <td width="15">&nbsp;</td>
                <td class="ms-descriptiontext" style="color: red;">
                    <span id="ctl00_PlaceHolderDialogBodySection_ctl08"></span>
                </td>
            <td width="15">&nbsp;</td>
        </tr>
        <tr height="100%">
            <td width="15"><img width="15" height="200" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
            <td height="100%">
                <table width="100%" height="100%" class="ms-pickerresultoutertable" id="ResultOuterTable" style="height: 202px;" cellspacing="0" cellpadding="0">
                    <tbody><tr height="100%">
                        <td class="TreeContainer" id="SearchArea" style="height: 100%; vertical-align: top; display: block;">
                <div class="ms-pickertreediv" id="MetadataTreeControlTreeSearch" style="height: 45px;"><ul class="TmtTree" id="MetadataTreeControlTreeSearch_ul"><li id="0"><div class="treenodediv" id="_Div2"><span id="_ImgContainer"><img width="16" height="1" tabindex="-1" class="ti" src="/_layouts/15/Images/blank.gif"></span><img width="4" height="20" title="Icon" id="ICN_2" alt="Icon" src="/_layouts/15/Images/blank.gif"><span class="tnn" id="TXN_2"><span class="ms-input" id="TXC_2"><span tabindex="0" id="LBL_2"></span><input tabindex="0" class="ms-input display-none" id="IPT_2"></span></span></div><ul id="0_ul"></ul></li></ul></div>
            </td>
            <td class="TreeContainer" id="BrowseArea" style="width: 0px; vertical-align: top; display: none;">
                <div class="ms-pickertreediv" id="MetadataTreeControlTreeBrowse" style="height: 0px;"></div>
            </td>
            <td class="ms-verticalAlignTop" id="ResultArea" style="width: 60%; vertical-align: top;">
                <div class="ms-pickerresultdiv" id="resultcontent" style="height: 45px;"><table class="pickerresulttable" id="resultTable" style="width: 100%; border-collapse: collapse; background-color: white;" hidefocus="true" border="0" cellpadding="0" cellspaceing="0" EditorControlClientId="ctl00_PlaceHolderDialogBodySection_ctl05"><tbody><tr class="ms-pickerresultheadertr"><th class="ms-ph" SortOrder="Asc">Display Name</th><th class="ms-ph" SortOrder="Asc">E-mail Address</th><th class="ms-ph" SortOrder="Asc">Title</th><th class="ms-ph" SortOrder="Asc">Department</th><th class="ms-ph" SortOrder="Asc">Presence</th><th class="ms-ph" SortOrder="Asc">Work Phone</th><th class="ms-ph" SortOrder="Asc">Location</th></tr><tr tabindex="0" class="ms-alternating" id="row0" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|..." DisplayText="test" IsResolved="True" Description="i:0#.w|ddd\**"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">test@test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">Network Support Manager</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">Network</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">test2@test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|addd"><td class="ms-pb">ttttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="ttttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">test@test.net</td><td class="ms-pb">Network Support Manager</td><td class="ms-pb">Network</td><td class="ms-pb">test@test.net</td><td class="ms-pb"></td><td class="ms-pb"></td></tr><tr tabindex="0" class="ms-alternating" id="row1" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|test" DisplayText="tttt" IsResolved="True" Description="i:0#.w|test"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">Head of Support</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">IT Services</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">test.net</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|test"><td class="ms-pb">tttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="tttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">FAl-test.net</td><td class="ms-pb">Head of Support</td><td class="ms-pb">IT Services</td><td class="ms-pb">test.net</td><td class="ms-pb"></td><td class="ms-pb"></td></tr><tr tabindex="0" class="ms-alternating" id="row2" resultRow="resultRow" entityXml='<Entities Append="False" Error="" Separator=";" MaxHeight="3"><Entity Key="i:0#.w|atttt" DisplayText="tttt" IsResolved="True" Description="i:0#.w|attt"><ExtraData><ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><DictionaryEntry><Key xsi:type="xsd:string">Email</Key><Value xsi:type="xsd:string">ttt</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Title</Key><Value xsi:type="xsd:string">COO</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Department</Key><Value xsi:type="xsd:string">Directors</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">SIPAddress</Key><Value xsi:type="xsd:string">ttt</Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">WorkPhone</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry><DictionaryEntry><Key xsi:type="xsd:string">Location</Key><Value xsi:type="xsd:string"></Value></DictionaryEntry></ArrayOfDictionaryEntry></ExtraData><MultipleMatches /></Entity></Entities>' key="i:0#.w|ad-tttt"><td class="ms-pb">tttt<a id="resultTable_row0_Link" href="javascript:"><img width="1" height="1" alt="ttt" src="/_layouts/15/Images/blank.gif" border="0"></a></td><td class="ms-pb">tttt</td><td class="ms-pb">COO</td><td class="ms-pb">Directors</td><td class="ms-pb">tt</td><td class="ms-pb"></td>

//code goes here for the dialog options
</td></tr></tbody></table></div>
            </td>
                    </tr>
                </tbody></table>
            </td>
            <td width="15"><img width="15" height="200" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
        </tr>
        <tr>
            <td height="14"><img width="1" height="5" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
        </tr>
        <tr id="ctl00_PlaceHolderDialogBodySection_EditorRow" style="display: none; position: absolute;">
    <td width="15">&nbsp;</td>
    <td width="100%">
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tbody><tr>
                        <td><input name="ctl00$PlaceHolderDialogBodySection$AddSel" disabled="disabled" class="ms-NarrowButtonHeightWidth" id="ctl00_PlaceHolderDialogBodySection_AddSel" accesskey="A" onclick="addSelected_Click();" type="button" value="Add ->"></td>
                        <td width="10"><img width="4" height="1" alt="" src="/_layouts/15/images/blank.gif?rev=23"></td>
                        <td width="100%"><span id="ctl00_PlaceHolderDialogBodySection_ctl05" aria-live="polite" aria-relevant="all" style="width: 100%; display: inline-block;" showentitydisplaytextintextbox="0" eeaftercallbackclientscript="" invalidate="false" allowtypein="false" showdatavalidationerrorborder="false" prefercontenteditablediv="true" moreitemstext="More Names..." allowempty="1" nomatchestext="<No Matching Names>" value="" removetext="Remove" editoroldvalue=""><input name="ctl00$PlaceHolderDialogBodySection$ctl05$hiddenSpanData" id="ctl00_PlaceHolderDialogBodySection_ctl05_hiddenSpanData" type="hidden" value=""><input name="ctl00$PlaceHolderDialogBodySection$ctl05$OriginalEntities" id="ctl00_PlaceHolderDialogBodySection_ctl05_OriginalEntities" type="hidden" value="<Entities />"><input name="ctl00$PlaceHolderDialogBodySection$ctl05$HiddenEntityKey" id="ctl00_PlaceHolderDialogBodySection_ctl05_HiddenEntityKey" type="hidden"><input name="ctl00$PlaceHolderDialogBodySection$ctl05$HiddenEntityDisplayText" id="ctl00_PlaceHolderDialogBodySection_ctl05_HiddenEntityDisplayText" type="hidden"><table class="ms-usereditor" id="ctl00_PlaceHolderDialogBodySection_ctl05_OuterTable" style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
        <tbody><tr valign="bottom">
            <td valign="top"><table style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
                <tbody><tr>
                    <td id="ctl00_PlaceHolderDialogBodySection_ctl05_containerCell"><div tabindex="0" title="People Picker" class="ms-inputuserfield ms-inputBox" id="ctl00_PlaceHolderDialogBodySection_ctl05_upLevelDiv" role="textbox" aria-haspopup="true" style="height: 20px; -ms-overflow-x: hidden; -ms-word-wrap: break-word;" spellcheck="false" aria-multiline="true" onkeydown="return onKeyDownRw('ctl00_PlaceHolderDialogBodySection_ctl05', 3, false, event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderDialogBodySection_ctl05');" onclick="onClickRw(true, true,event,'ctl00_PlaceHolderDialogBodySection_ctl05');" onchange="updateControlValue('ctl00_PlaceHolderDialogBodySection_ctl05');" ondragstart="canEvt(event);" oncopy="docopy('ctl00_PlaceHolderDialogBodySection_ctl05',event);" onpaste="dopaste('ctl00_PlaceHolderDialogBodySection_ctl05',event);" onfocusin="StoreOldValue('ctl00_PlaceHolderDialogBodySection_ctl05'); saveOldEntities('ctl00_PlaceHolderDialogBodySection_ctl05'); Sys.UI.DomElement.addCssClass(this, 'ms-inputBoxActive');" onfocusout="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderDialogBodySection_ctl05',event)){if(!ValidatePickerControl('ctl00_PlaceHolderDialogBodySection_ctl05')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderDialogBodySection_ctl05');}}} Sys.UI.DomElement.removeCssClass(this, 'ms-inputBoxActive');" name="upLevelDiv" autopostback="0" prefercontenteditablediv="true" rows="1"></div><textarea name="ctl00$PlaceHolderDialogBodySection$ctl05$downlevelTextBox" title="People Picker" class="ms-inputuserfield ms-inputBox" id="ctl00_PlaceHolderDialogBodySection_ctl05_downlevelTextBox" style="width: 100%; display: none; position: absolute;" onkeydown="return onKeyDownRw('ctl00_PlaceHolderDialogBodySection_ctl05', 3, false, event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderDialogBodySection_ctl05');" onfocus="StoreOldValue('ctl00_PlaceHolderDialogBodySection_ctl05'); saveOldEntities('ctl00_PlaceHolderDialogBodySection_ctl05'); Sys.UI.DomElement.addCssClass(this, 'ms-inputBoxActive');" onblur="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderDialogBodySection_ctl05',event)){if(!ValidatePickerControl('ctl00_PlaceHolderDialogBodySection_ctl05')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderDialogBodySection_ctl05');}}} Sys.UI.DomElement.removeCssClass(this, 'ms-inputBoxActive');" onchange="updateControlValue('ctl00_PlaceHolderDialogBodySection_ctl05');" rows="1" cols="20" autopostback="0" renderascontenteditablediv="true"></textarea></td>
                </tr>
            </tbody></table></td>
        </tr><tr>
            <td><span class="ms-error" id="ctl00_PlaceHolderDialogBodySection_ctl05_errorLabel"></span></td>
        </tr>
    </tbody></table></span></td>
                    </tr>
                </tbody></table>
            </td>
    <td width="15">&nbsp;</td>
</tr>

    </tbody>

Answer 1

要解决这个问题，为什么不直接使用 CSS:

.ms-pickerresultdiv[style]{
    height:auto !important;
    max-height:350px !important;
}

或者只是

.ms-pickerresultdiv[style]{
    height:350px !important;
}

如果您需要增加父表格单元格的大小，应该这样做:

#row2 td:last-child{
    height:350px;
}

或者根据您的脚本，覆盖这两个元素:

#MetadataTreeControlTreeSearch,
#resultcontent[style]{
    height:350px !important;
}

尽管我在您发布的代码中找不到 #MetadataTreeControlTreeSearch 元素。

Here's a fiddle with all that

其中任何一个都应该覆盖内联样式。