javascript - 如何在不让 View 跳转到元素加载位置的情况下将子节点添加到父节点？

Question

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

这是我的 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>

因此，当我在我的本地主机上运行它时，它会在打开时呈现所有内容，但会跳转到屏幕底部进行呈现，然后跳回当前 View 。这里的大问题是因为无限滚动以及它如何不断跳到底部它最终会无限期地运行，因为它不断跳到底部触发 jquery 函数。

编辑:包括 Plunker，但目前不确定如何让 jquery 使用 plunker 进行无限滚动，所以现在只有一个固定的负载值 10。即使它已经滚动到底部，因为它呈现更多。

http://plnkr.co/edit/fUrJek3RAicHG98lUrC9?p=preview

Answer 1

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

(参见“慢动作插图”here.)

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

---

但是，这种方法存在一些问题。

• 由于它通过在 iframe 加载时禁用 javascript 来工作，因此所需的 javascript 功能也被禁用。 (即没有“最近的故事”)

• 感觉难以置信。

• 我们要做什么并不明显。

---

PS:这是W3Schools has to say about the sandbox attribute这是一个walkthrough on html5rocks.

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