Question

如何在不重新加载li里面的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>

Answer 1

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

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

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

我创建了一个jsFiddle that demonstrates this。该代码使用jQuery。

<强> HTML

关闭li标签

<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

对li元素使用绝对定位

#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();
    });
});

排序列表而不重新加载iframe

1 个答案: