Question

我正在与不同域中的iframe进行通信，因此我使用window.postMessage来发送请求。我在发送请求时添加了一个队列，因此在转移到另一个请求之前必须先完成第一个请求。这就是我所拥有的。

<iframe src="http://design.imageprocessor.com" id="image_source" style="display:none"></iframe>

<script>

var image_source = document.getElementById("image_source").contentWindow;
var queue = 1;
var LoadedSets = [];
var ImageDetails = [{/*sets of image details*/}];

function appendPreview(set_id, image) {
    //append new generated image to view
}

function isScrolledIntoView(elem, details){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var set_id = elem.split('_').pop()*1;
    if ((elemTop <= docViewBottom) && (elemTop >= docViewTop)) {
        if (queue == set_id) {
            image_source.postMessage(details, '*');
            LoadedSets.push(set_id);
        }
    }
}

$(window).scroll(function(){
    _.each(ImageDetails, function(details, set_id) {
        if ($.inArray(set_id, LoadedSets) == -1)
        {
            isScrolledIntoView('#set_'+set_id, details); 
        }
    });
});

window.addEventListener("message", function(e){
    if (e.data.status == 'complete') { // processing of image is complete
        appendPreview(e.data.set_id, e.data.image); //
        queue++; //increment queue so we move to the next image
    }
}, false);

</script>

确实有效。但有更好的排队请求方式吗？我觉得我的队列很糟糕。希望可以有人帮帮我。感谢。

从父页面到子页面（iframe）排队请求的最佳方法

0 个答案: