排序列表無需重新加載iframe

Question

如何排序列表而不實現if裏面的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

關閉李標籤

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