Forum PHP.pl > iFrame - onload, przy zmianie zawartości przez contentWindow

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: iFrame - onload, przy zmianie zawartości przez contentWindow

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

adbacz

11.10.2015, 11:48:14

Czy da się podpiąć zdarzenie pod ramkę, której będę zmieniał tylko treść poprzez poniższy kod, nie zmieniając jej SRC?

[JAVASCRIPT] pobierz, plaintext 
iFrame.contentWindow.document.querySelector('body').innerHTML = 'code...';
[JAVASCRIPT] pobierz, plaintext

Niestety, podpięcie onload działa tylko za załadowaniem ramki w dokumencie, i działa gdy zmieniam SRC, jednak nie działa gdy zmieniam treść wewnątrz. Czy da się to jakoś sprawdzić, czy treść wrzucona w ramkę załadowała się?

Wiem, że mogę zmieniać src, już tak robiłem, jednak działało to za wolno. Miałem dwa requesty, zamiast jednego, które praktycznie wykonywały się tak samo długo, tylko, że jeden za drugim. A w tym pierwszym mogę od razu dostać kod ramki, więc chciałbym to wykorzystać tak, jak opisałem wyżej.

trueblue

11.10.2015, 12:03:49

A znasz moment zmiany treści w ramce (tzn. Ty ją zmieniasz), czy chcesz tylko nasłuchiwać?

Comandeer

11.10.2015, 12:04:15

Myślę nad MutationObserver - pozwoliłoby to na stwierdzenie czy coś się zmieniło w danym elemencie.

adbacz

11.10.2015, 13:06:34

Potrzebuje konkretnie wiedzieć kiedy treść ramki się załaduje. W tej ramce są CSS i obrazki, i potrzebuje wiedzieć coś na zasadzie document.ready, ale dla tej załadowanej treści ramki.

PS. To ja w kodzie zmieniam treść tej ramki, wiem kiedy to się dzieje, ale jak zaladuje nową treść, to widać moment załadowania plików CSS, czego bym nie chciał.

trueblue

11.10.2015, 13:32:01

Masz na myśli moment kiedy strona nie jest ostylowana?
https://www.google.pl/search?q=fouc

adbacz

11.10.2015, 14:23:40

Tak, mniej więcej też o to. Normalnie, przykrywam ramkę DIVem i ukrywam DIVa gdy ta jest gotowa, ale w przypadku podmiany treści jak wyżej opisalem nie mam możliwości sprawdzić kiedy ramka jest gotowa by ukryć tego DIVa. A to właśnie chce uzyskać.

Comandeer

11.10.2015, 15:38:41

A jak przypniesz do iframe.contentWindow listener dla load w capture phase i będziesz łapał wczytanie się poszczególnych zasobów?

Kod

<!DOCTYPE html>
    <html lang="pl" dir="ltr" class="no-js">
        <head>
            <meta charset="UTF-8">
            <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
            <title>Ehhhh</title>
            <style>
            </style>
        </head>
        <body>
            <button>Wczytaj arkusz</button>
            <iframe src="test2.html"></iframe>

            <script>(function(iframe, button)
            {
                iframe.addEventListener('load', function()
                {
                    var iframeWindow = iframe.contentWindow
                    ,iframeDocument = iframeWindow.document;

                    iframeDocument.addEventListener('load', function(e)
                    {
                        console.log('Resource loaded', e.target);
                    }, true);

                    button.addEventListener('click', function(e)
                    {
                        var link = document.createElement('link');
                        link.rel = 'stylesheet';
                        link.href = 'http://tutorials.comandeer.pl/css/framework.css';

                        iframeDocument.head.appendChild(link);
                    }, false);
                }, false);
            }(document.querySelector('iframe'), document.querySelector('button')))</script>
        </body>
    </html>

adbacz

12.10.2015, 14:16:29

Już tak próbowałem, niestety to też nie działa. Load działa tylko gdy strona się załaduje (nawet w ramce) ale podczas zmiany, nawet całego body, żaden podobny event się nie wykonuje.

SOLVED!!!

Pobieramy obiekt document, z contentWindow danego iFrame, następnie otwieramy stream (open()), ładujemy nową treść (writeln() lub zwykłe write()) i zamykamy stream (close()) po czym treść ramki się przeładowywuje, a po wszystkim zostaje wywołany event onload, za każdym razem gdy zmienimy treść ramki w ten sposób.

Dla potomności kod:

[JAVASCRIPT] pobierz, plaintext 
var doc = iFrame.contentWindow.document;
doc.open();
doc.writeln('<!doctype html>' + '<html><head>' + '<title>' + title + '</title>' + '</head><body>' + contentToChange + '</body></html>');
doc.close();
[JAVASCRIPT] pobierz, plaintext

-----------------------
@Moderator - Proszę dodać w tytule [ROZWIĄZANY] tematu dla innych.

Comandeer

12.10.2015, 15:02:01

Ale moje load się powinno odpalić przy dodaniu jakiegoś link. Niemniej Twoje rozwiązanie jest prostsze

adbacz

12.10.2015, 15:42:43

Tak, tutaj masz rację. Jednak chodziło mi konkretnie o podmianę całej zawartości ramki, bez zmiany SRC tej ramki w ten sposób, by odpaliło się POPRAWNIE zdarzenie onload, czyli dokładnie w momencie gdybym zmienił SRC ramki.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.