排序列表而不重新加载iframe

Sort list without reloading iframe

本文关键字：加载 iframe 新加载 列表 排序      更新时间：2023-09-26

如何在不重新加载iframe的情况下排序列表?(appendChild使iframe重新加载)

<script>
window.onload = function () {
    var my_ul = document.getElementById('my_ul'),
        my_button = document.getElementById('my_button');
    function sort_function() {
        for(var i = 0; i < 5; i++) {
            var list = [1, 2, 3, 4, 5];
            my_ul.appendChild(document.querySelector('[data-sort="' + list[i] + '"]'));
        }
    }
    my_button.onclick = function () {
        sort_function();
    }
}
</script>
<a id=my_button href="#">Sort</a>
<ul id=my_ul>
    <li data-sort=3>3<iframe src="#3"></iframe>
    <li data-sort=2>2<iframe src="#2"></iframe>
    <li data-sort=4>4<iframe src="#4"></iframe>
    <li data-sort=1>1<iframe src="#1"></iframe>
    <li data-sort=5>5<iframe src="#5"></iframe>
</ul>

如果您在DOM中移动一个对象，它将被删除并重新添加。结果是iframe的内容将被重新加载。

我不知道你在那些iframe中显示了什么，但也许你可以摆脱它们，并使用AJAX动态加载内容(例如jQuery.get())。

如果你真的想使用iframe并且你真的想避免重新加载它们，我认为唯一的方法是使li元素浮动并动态地重新定位它们。

我创建了一个jsFiddle来演示这一点。代码使用jQuery。

关闭标签

<a id="my_button" href="#">Sort</a>
<ul id="my_ul">
    <li data-sort=3>3<iframe src="#3"></iframe></li>
    <li data-sort=2>2<iframe src="#2"></iframe></li>
    <li data-sort=4>4<iframe src="#4"></iframe></li>
    <li data-sort=1>1<iframe src="#1"></iframe></li>
    <li data-sort=5>5<iframe src="#5"></iframe></li>
</ul>
CSS

使用绝对定位

#my_ul li {
   position: absolute;
   display: block;
}
Javascript

var iframeTop = 0;
// Initial positioning at document load
$(function() {
    var ofsTop = $("#my_ul li:first-child").position().top;
    $("#my_ul li").each(function(index, value) {
        $(value).css({ top: ofsTop + 'px'});
        ofsTop += $(value).height();
    });
});
// Re-position when user clicks #my_button
$("#my_button").click(function() {
    // sort li depending on data-sort
    var sorted = $("#my_ul li").sort(function(a, b) {
        return $(a).data("sort") - $(b).data("sort");
    });
    // re-position li's
    if (!iframeTop) iframeTop = $("#my_ul li:first-child").position().top;
    var ofsTop = iframeTop;
    $.each(sorted, function(index, value) {
        $(value).css({ top: ofsTop + 'px'});
        ofsTop += $(value).height();
    });
});
相关文章：