javascript – 如何将子节点添加到父节点而不将视图跳转到正在加载元素的位置？

2023年6月25日 188次阅读

当我渲染元素并将它们附加到父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函数.

编辑：包括虽然不知道怎么让jquery用plunker进行无限滚动的plunker,所以现在只有10的固定负载值.甚至已经滚动到底部,因为它渲染更多.

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

最佳答案 您的问题是由于当bing自动聚焦搜索栏时,您的浏览器会向下滚动到iframe,以便您可以键入文本.

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

我所知道的唯一解决方法是使用iframe沙箱属性 – 仅限HTML5！ – 防止bing聚焦搜索栏.然后当iframe完成加载时,我们实现了JavaScript. Example.

但是,这种方法存在一些问题.

>因为它在加载iframe时禁用javascript,所以也禁用了所需的javascript功能. (即没有’最近的故事’)
>感觉令人难以置信的hacky.
>我们想要做的事情并不明显.

PS：这是W3Schools has to say about the sandbox attribute,这是walkthrough on html5rocks.

PPS：如果有人知道更好的方法,我很乐意听到它.

点赞