Вопрос по jquery, iframe, javascript, html, progress-bar – Загрузка фреймов с индикатором выполнения с помощью jQuery?

3

в моей работе (интранет) - у меня есть страница aspx, в которой есть много фреймов (все наши).

каждый iframe устанавливается (js / jquery) с помощью btnX (на странице aspx много кнопок ... некоторые устанавливают src на iframes, некоторые нет).

enter image description here

notice : the progrssBAr is on the main page...

цель: progressBar во время загрузки iframe ...

код: (сначалаmyPageWrapper являетсяdisplay:none)

<code>$('#myPageWrapper').on ('load','iframe',function () { $("#myProgressBar").hide();});
</code>

2 проблемы:

i can listen to the iframes load finish event. but what about showing the ProgfressBar ? i dont want to edit all btn's event "onclick" - is there any centralized solution to this [using jquery]?

мне нужно то, что делает:

"when btn sets the src to an iframe - show myProgressBar"

simultaneous events can occur : iframe A is being loading for 2 min ( example) - so it shows the progress bar , meanwhile i pressed other button which sets src to iframe B - which is loading very fast... once its loaded - it hides the ProgressBar ( look at my code) - but it shouldnt...A didnt finish yet....
Хорошо, просто интересно, было ли iframe требованием. JP Hellemons
это то, что вам нужно:easyxdm.net/wp - Обмен сообщениями между доменами стал проще Luca Filosofi
@aSeptik здесь нет кросс-доменов .... все наши. Royi Namir
@JPHellemons на моей работе в интранете ... они создали страницы и установили src .... иногда лучше использовать iframe - у вас нет всего на 1 странице ... вы можете протестировать отдельную страницу и т. Д. ... я знаю, что это плохо для SEO. но это не вопрос Royi Namir
Может быть, глупый вопрос, но вам нужны фреймы? Вы также можете использовать ajax для загрузки div. JP Hellemons

Ваш Ответ

1   ответ
12
CODE UPDATED NOTE: since i received 3 up-votes i assume that this code is helping someone else other then the original OP; so i decided to update the code to reflect what it was meant to be at the beginning, since so far the OP and i have discovered that his problem was somewhere else in his code.

demo: http://so.lucafilosofi.com/iframes-loading-with-progress-bar-using-jquery/

глава главной страницы

        var iframes = [], progress = 0;
        $(function() {
            $pGressIndex = $('#progress-bar-indicator');
            $('#navigation a').click(function() {

                var iframe_id = this.hash.split('#')[1];

                if (iframes.indexOf(iframe_id) === -1) {

                    $('#log').prepend('<p><strong>' + iframe_id + '</strong> is loading!</p>');

                    iframes.push(iframe_id);

                    if (parseInt($pGressIndex.width()) == 960) {
                        $pGressIndex.removeAttr('style');
                    }

                    var fW = (iframes.length > 1) ? (660 - (20 * iframes.length ) ) : 660;

                    $pGressIndex.animate({
                        width : fW
                    }, 5000);

                    var iframe_page = iframe_id + '.html';

                    if ($(this.hash).length != 0) {
                        $(this.hash).remove();
                    }

                    $('<iframe>').attr({
                        id : iframe_id,
                        src : iframe_page,
                        frameBorder : 0,
                        width : 960
                    }).appendTo('#iframes-wrapper');
                }
                return false;
            });
        });

нижняя часть главной страницы:

            window.addEventListener("message", function(e) {
                console.log(iframes);
                var index = iframes.indexOf(e.data);
                iframes.splice(index, 1);
                if (iframes.length == 0) {
                    $pGressIndex.stop(true).animate({
                        width : 960
                    }, 100);
                }
                $('#' + e.data).show();
            }, false);

нижняя часть каждой страницы iframe:

           top.postMessage('frame-name-or-what-you-want', window.location.href);
У меня нет слов, чтобы оценить ваши усилия и помощь. благодарю вас :) Royi Namir
@ Royi Namir: я собираюсь добавить немного исправлений и комментариев ...! добро пожаловать, и я рад, что это помогло ...
@Royi Namir: пример исходного кода с полным комментарием
почему вы не прослушали событие загрузки для каждого iframe? Royi Namir
у меня есть (например) 100 iframe на моей странице. каждый устанавливается SRC по-разному. где строка, которая говорит мне: «кто-то установил атрибут SRC для iframe» ? мне нужно слушать все кнопки на странице? ** мне просто нужны те события, которые устанавливают SRC ** Royi Namir

Похожие вопросы