我需要在 javascript 中调用 ajax 后向节点插入一些 html。
我用的是framework，不过没关系。重要的事情——在 ajax 回调中插入内容:
// added filterWrapper to DOM
BX.ajax.get(
'/get_filter_for_diagrams.php',
{
'sessid': BX.bitrix_sessid()
},
function (data)
{
filterWrapper.innerHTML = data;
}
);
通过 innerHTML 添加内容后，我的窗口滚动到该元素，但我不希望出现这种行为。
我尝试制作:
window.scrollTo(0,0);
但都一样 - 滚动到元素。
如何防止滚动到元素？
更新: 生成的html
<!-- Final :: Search -->
<div class="main-ui-filter-search main-ui-filter-no-search main-ui-filter-theme-default" id="filter_diagrams_underwriters_search_container">
<input
type="text"
tabindex="1"autofocus=""value=""
name="FIND"
placeholder="Filter"
class="main-ui-filter-search-filter"
id="filter_diagrams_underwriters_search"
autocomplete="off">
<div class="main-ui-item-icon-block">
<span class="main-ui-item-icon main-ui-search"></span>
<span class="main-ui-item-icon main-ui-delete"></span>
</div>
</div>
<!--'start_frame_cache_xIeC97'-->
<script type="text/html" id="filter_diagrams_underwriters_GENERAL_template">
<div class="main-ui-filter-wrapper main-ui-filter-value-required-mode main-ui-filter-theme-default">
<div class="main-ui-filter-inner-container">
<div class="main-ui-filter-sidebar">
<div class="main-ui-filter-sidebar-title">
<h5 class="main-ui-filter-sidebar-title-item">Filters</h5>
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-sidebar-item-container">
<div class="main-ui-filter-sidebar-item main-ui-hide" data-id="tmp_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Current month</span>
<input type="text" placeholder="Filter name" value="Current month" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-current-item main-ui-hide" data-id="default_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Filter</span>
<input type="text" placeholder="Filter name" value="Filter" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-new-filter">
<div class="main-ui-filter-edit-mask"></div>
<input class="main-ui-filter-sidebar-edit-control" type="text" placeholder="Filter name">
</div>
</div><!--main-ui-filter-sidebar-item-container-->
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-field-container">
<div class="main-ui-filter-field-container-list">
</div>
<div class="main-ui-filter-field-add">
<span class="main-ui-filter-field-add-item">Add field</span>
<span class="main-ui-filter-field-restore-items">Restore default fields</span>
</div><!--main-ui-filter-field-add-->
</div><!--main-ui-filter-field-container-->
<div class="main-ui-filter-bottom-controls">
<div class="main-ui-filter-add-container">
<span class="main-ui-filter-add-item">Save filter</span>
<span class="main-ui-filter-add-edit" title="Configure filter"></span>
<span class="main-ui-filter-reset-link">
<span class="main-ui-filter-field-button-item">Reset to default</span>
</span>
</div><!--main-ui-filter-add-container-->
<div class="main-ui-filter-field-preset-button-container">
<div class="main-ui-filter-field-button-inner">
<span class="webform-small-button webform-small-button-blue main-ui-filter-field-button main-ui-filter-find">
<span class="main-ui-filter-field-button-item">Search</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-reset">
<span class="main-ui-filter-field-button-item">Reset</span>
</span>
</div>
</div>
<div class="main-ui-filter-field-button-container">
<div class="main-ui-filter-field-button-inner">
<label class="main-ui-filter-field-button main-ui-filter-save-for-all" for="save-for-all">
<input id="save-for-all" class="main-ui-filter-field-button-checkbox" type="checkbox">
<span class="main-ui-filter-field-button-item">Apply for all users</span>
</label>
<span class="webform-small-button webform-small-button-accept main-ui-filter-field-button main-ui-filter-save">
<span class="main-ui-filter-field-button-item">Save</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-cancel">
<span class="main-ui-filter-field-button-item">Cancel</span>
</span>
</div>
</div>
</div><!--main-ui-filter-bottom-controls-->
</div><!--main-ui-filter-inner-container-->
</div><!--main-ui-filter-wrapper-->
</script>
<!--'end_frame_cache_xIeC97'-->UPD2:在移除自动对焦的正则表达式之后(console.log 输出):
<!-- Final :: Search -->
<div class="main-ui-filter-search main-ui-filter-no-search main-ui-filter-theme-default" id="filter_diagrams_underwriters_search_container">
<input
type="text"
tabindex="1"value=""
name="FIND"
placeholder="Filter"
class="main-ui-filter-search-filter"
id="filter_diagrams_underwriters_search"
autocomplete="off">
<div class="main-ui-item-icon-block">
<span class="main-ui-item-icon main-ui-search"></span>
<span class="main-ui-item-icon main-ui-delete"></span>
</div>
</div>
<!--'start_frame_cache_xIeC97'-->
<script type="text/html" id="filter_diagrams_underwriters_GENERAL_template">
<div class="main-ui-filter-wrapper main-ui-filter-value-required-mode main-ui-filter-theme-default">
<div class="main-ui-filter-inner-container">
<div class="main-ui-filter-sidebar">
<div class="main-ui-filter-sidebar-title">
<h5 class="main-ui-filter-sidebar-title-item">Filters</h5>
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-sidebar-item-container">
<div class="main-ui-filter-sidebar-item main-ui-hide" data-id="tmp_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Current month</span>
<input type="text" placeholder="Filter name" value="Current month" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-current-item main-ui-hide" data-id="default_filter" >
<span class="main-ui-item-icon main-ui-filter-icon-grab" title="Pull to sort the filters list"></span>
<span class="main-ui-filter-sidebar-item-text-container">
<span class="main-ui-filter-sidebar-item-text">Filter</span>
<input type="text" placeholder="Filter name" value="Filter" class="main-ui-filter-sidebar-item-input">
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
</span>
<span class="main-ui-item-icon main-ui-filter-icon-pin" title="Default filter"></span>
<span class="main-ui-item-icon main-ui-filter-icon-edit" title="Edit filter name"></span>
<span class="main-ui-item-icon main-ui-delete" title="Delete filter"></span>
<div class="main-ui-filter-edit-mask"></div>
</div>
<div class="main-ui-filter-sidebar-item main-ui-filter-new-filter">
<div class="main-ui-filter-edit-mask"></div>
<input class="main-ui-filter-sidebar-edit-control" type="text" placeholder="Filter name">
</div>
</div><!--main-ui-filter-sidebar-item-container-->
</div><!--main-ui-filter-sidebar-->
<div class="main-ui-filter-field-container">
<div class="main-ui-filter-field-container-list">
</div>
<div class="main-ui-filter-field-add">
<span class="main-ui-filter-field-add-item">Add field</span>
<span class="main-ui-filter-field-restore-items">Restore default fields</span>
</div><!--main-ui-filter-field-add-->
</div><!--main-ui-filter-field-container-->
<div class="main-ui-filter-bottom-controls">
<div class="main-ui-filter-add-container">
<span class="main-ui-filter-add-item">Save filter</span>
<span class="main-ui-filter-add-edit" title="Configure filter"></span>
<span class="main-ui-filter-reset-link">
<span class="main-ui-filter-field-button-item">Reset to default</span>
</span>
</div><!--main-ui-filter-add-container-->
<div class="main-ui-filter-field-preset-button-container">
<div class="main-ui-filter-field-button-inner">
<span class="webform-small-button webform-small-button-blue main-ui-filter-field-button main-ui-filter-find">
<span class="main-ui-filter-field-button-item">Search</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-reset">
<span class="main-ui-filter-field-button-item">Reset</span>
</span>
</div>
</div>
<div class="main-ui-filter-field-button-container">
<div class="main-ui-filter-field-button-inner">
<label class="main-ui-filter-field-button main-ui-filter-save-for-all" for="save-for-all">
<input id="save-for-all" class="main-ui-filter-field-button-checkbox" type="checkbox">
<span class="main-ui-filter-field-button-item">Apply for all users</span>
</label>
<span class="webform-small-button webform-small-button-accept main-ui-filter-field-button main-ui-filter-save">
<span class="main-ui-filter-field-button-item">Save</span>
</span>
<span class="webform-small-button webform-small-button-transparent main-ui-filter-field-button main-ui-filter-cancel">
<span class="main-ui-filter-field-button-item">Cancel</span>
</span>
</div>
</div>
</div><!--main-ui-filter-bottom-controls-->
</div><!--main-ui-filter-inner-container-->
</div><!--main-ui-filter-wrapper-->
</script>
<!--'end_frame_cache_xIeC97'-->最佳答案
自动对焦属性将使控件自动对焦。因此页面将滚动到那里。
为了演示，在这个实际页面(this SO page)中，尝试执行(使用开发工具控制台)
document.getElementsByClassName('js-primary-footer-links')[0].innerHTML = "<input autofocus='' type='text'/>"
对比
document.getElementsByClassName('js-primary-footer-links')[0].innerHTML = "<input type='text'/>"
生成的内容是否也在你的控制之下？ - 如果没有，您可以从返回的数据中删除该部分，然后再将其放在页面上(使用 innerHTML)
即
filterWrapper.innerHTML = data.replace('autofocus=""', '');
编辑:你的新代码不再为我触发滚动，所以还有其他东西。可能在您当前页面的源代码中，或者仍在框架中。
您提供的代码示例(保存在 test.html 中并在浏览器中打开):
<html>
<head>
<script type="text/template" id="content">
<!-- Put your processed HTML here, for clearity - I did not include it here-->
<!--Your old html did trigger the scroll, your new html doesnt-->
</script>
</head>
<body>
<input type="button" onclick="load()" value="load"/>
<div style="background-color: green; height: 100%"></div>
<div id="diva"></div>
</body>
</html>
关于javascript - 当通过 innerHTML 添加内容时，发生不必要的滚动到元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51043681/