如何在不跳转到正在加载元素的位置的情况下向父节点添加子节点？

Question

当我渲染元素并将它们附加到父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);
    }
}

然后我如何使用jQuery从HTML文件中进行无限滚动加载？

<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=preview

- Foris Kuang

---

非常感谢，是的，问题出在iframe的渲染方式，它是通过跳转到框架本身来渲染的。我通过在Angular中进行测试并与hrefs和文本进行比较发现了这个问题。对于这个答案给予加一赞。 - Foris Kuang

哦，等等，问题在于它是否需要渲染，所以我猜即使你的代码可以工作，因为不需要渲染。我需要引用一个网站，那么如果这个网站需要渲染，比如例子中的必应，我们该怎么做呢？ - Foris Kuang

是必应只是一个示例，还是您必须在iframe中嵌入它的网站？ - J. Allan

现在只是一个例子。 - Foris Kuang

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/122149/discussion-between-jefre-n-and-foris-kuang。 - J. Allan

Answer 1

你的问题是由于bing自动将焦点放在搜索栏上时，你的浏览器会滚动到iframe，以便你可以输入文本。

（在这里查看“慢动作说明”here.）

我知道的唯一解决方法是使用iframe sandbox属性 - 仅适用于HTML5！- 防止bing聚焦搜索栏。然后当iframe加载完成后，我们重新允许JavaScript。 Example.

---

然而，这种方法还有几个问题。

• 它通过禁用javascript来工作，当iframe正在加载时，期望的javascript功能也被禁用。（即没有“最近的故事”）
• 它感觉像是一个极端的hack。
• 我们要做什么并不明显。

---

提示：这里是W3Schools对沙盒属性的解释，这里是html5rocks的教程。

附言：如果有人知道更好的方法，请务必告诉我，我会非常感激。

- J. Allan