Как завершить sh Загрузка Просмотр только после завершения загрузки внутренних фреймов MVC - PullRequest
Новая
       22

Как завершить sh Загрузка Просмотр только после завершения загрузки внутренних фреймов MVC

1 голос
/ 10 февраля 2020

У меня есть проект Do tNet CORE MVC. В проекте есть контроллер, который получает массив строк, каждая строка представляет источник Iframe, который необходимо поместить в представление.

Модель берет массив строк и выполняет с ними некоторые манипуляции, а это означает, что в конце концов, когда модель готова и передана в представление, у нее есть список строк, готовых для использования в качестве iframe SR C.

Список в модели такой - 

        public List<string> IFramePixels { get; set; };

И это мой View - 

<body>
    @foreach (string iframe in Model.IFramePixels)
    {
        <iframe width='1' height='1' frameborder='0' src='@iframe'></iframe>
    }
</body>

Все работает нормально, вопрос в том, как я могу отложить загрузку представления до sh времени, когда все эти внутренние Iframe будут загружены.

Причина, по которой я хочу, заключается в том, что какой-то внешний веб-сайт будет размещать мой веб-сайт как Iframe, и им нужно знать, когда все внутренние Iframe будут выполнены (поэтому я не могу использовать простой JS слушатель), я хотел скажите им, чтобы они выполняли какое-то прослушивание, когда моя веб-страница загружается, а это значит, что внутренние фреймы также выполняются.

Спасибо!

Редактировать -> Ну .. Стиль Я не мог найти никакого ответа, может быть, это просто невозможно? У кого-нибудь есть какой-то другой подход, который может дать мне то, что мне нужно? спасибо!

1 Ответ

1 голос
/ 18 февраля 2020

нужно знать, когда все внутренние Ифрамы сделаны ...

Ваше предложение напомнило мне о Promise.All в Javascript.

Так что, если я вас правильно понял, jQuery.when() может служить вашим намерениям. Кроме того, чтобы убедиться, что загрузка страницы не производится до тех пор, пока не будут загружены все iframe, вы можете использовать $. HoldReady

Пример кода, который поможет вам в пути: 

<div>
    <iframe id="if1" src="./let.html" height="200" width="300"></iframe>
    <iframe id="if2" src="./let.html" height="200" width="300"></iframe>
    <iframe id="if3" src="./let.html" height="200" width="300"></iframe>
</div>

<script src="./jquery-3.4.1.min.js"></script>
<script>
    // call this at the top of your script to delay jQuery's ready event.
    $.holdReady(true);

    var d1 = $.Deferred();
    var d2 = $.Deferred();
    var d3 = $.Deferred();

    $('#if1').on('load', function() {
        alert('iframe 1 Loaded');
        d1.resolve();
    });
    $('#if2').on('load', function() {
        alert('iframe 2 Loaded');
        d2.resolve();
    });
    $('#if3').on('load', function() {
        alert('iframe 3 Loaded');
        d3.resolve();
    });

    $.when(d1, d2, d3).done(function(v1, v2, v3) {
        alert(' All iframes loaded');
        $.holdReady(false); // this allows document.ready to begin

        // your logic here ...
        // At this moment, all iframes are loaded ...
    });


    $(document).ready(function() {            
        alert('This page just now finished Loading');
    });
</script>

Последовательность предупреждений четко показывает, что происходит. Как видите, jQuery .when () предоставляет способ выполнения функций обратного вызова на основе объектов, представляющих асинхронные события. Пожалуйста, проверьте Документы , если необходимо.

Наконец, поскольку вы вставляете теги <iframe> динамически, рассмотрите следующий код: 

        $.holdReady(true); // delay page load until all iframes get loaded


        var defer_Array = [];
        $.each($('iframe'), (index, tag) => {

            let temp = $.Deferred();
            defer_Array.push(temp);


            $(tag).on('load', function() {
                alert('iframe loaded #' + index);
                (defer_Array[index]).resolve();
            });
        })


        $.when(...defer_Array).done(function(v1, v2, v3) {
            alert(' All iframes loaded');
            $.holdReady(false); 
            // your logic here ...
        });

Не стесняйтесь возьмите код и настройте его, как вы будете sh ...:)

...