如何将子节点添加到父节点，而无需视图跳转到加载元素的位置

How to add child nodes to parent nodes without having view jump to where element is being loaded?

本文关键字：视图 加载 位置 元素 子节点 添加 父节点      更新时间：2023-09-26

当我渲染元素并将它们附加到父div时，我的屏幕一直跳到最底部的元素，因为它正在加载而不是加载它们并使视图停留在当前视图上。所以一开始，它应该在屏幕的顶部，并停留在那里，而不是跳到底部，当我向下滚动，它呈现更多的元素，它也应该停留在那个位置，而其余的加载。

下面是我的js文件中的代码。

function loadMultipleElements(amountToLoad, url) {
    var parentDiv = document.getElementById("instance");
    for(var i = 0; i < amountToLoad; i++) {
        var iframe = document.createElement('div')
        iframe.innerHTML = '<iframe src='"' + url + ''"></iframe>';
        parentDiv.appendChild(iframe);
    }
}

然后我如何将它加载到html文件中使用jquery的无限滚动，

<script>
    loadMultipleElements(5, "https://www.example.com");
        $(window).scroll(function() {
            if($(window).scrollTop() == ($(document).height()) - $(window).height()) {
                loadMultipleElements(5, "https://www.example.com");
            }
        });
</script>

所以当我在本地主机上运行这个时，它会在打开时渲染所有内容，但会跳到屏幕底部渲染它，然后跳转回当前视图。这里的大问题是由于无限滚动和它如何一直跳到底部它最终会无限地因为它一直跳到底部触发jquery函数。

编辑:Plunker包括，虽然不知道如何让jquery做无限滚动与Plunker的时刻，所以现在只是有一个固定的加载值10。甚至它已经滚动到底部，因为它呈现更多。

http://plnkr.co/edit/fUrJek3RAicHG98lUrC9?p =预览

您的问题是由于bing自动聚焦搜索栏时，您的浏览器向下滚动到iframe以便您可以输入文本。

(请参阅此处的"慢动作说明")

我所知道的唯一的解决方案是使用iframe sandbox属性- HTML5 ! -防止bing聚焦搜索栏。然后，当iframe加载完成后，我们重新启用JavaScript。例子。

  • 由于iframe加载时禁用javascript，因此所需的javascript功能也被禁用。(即。

PS:这是W3Schools对sandbox属性的看法，这是html5rocks的指南。

PPS:如果有人知道更好的方法，我想听听

相关文章：