Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> iFrame - onload, przy zmianie zawartości przez contentWindow, Jak to zrobić?
adbacz
post 11.10.2015, 11:48:14
Post #1





Grupa: Zarejestrowani
Postów: 532
Pomógł: 24
Dołączył: 15.04.2011
Skąd: Kalisz

Ostrzeżenie: (0%)
-----

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 
  1. 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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
trueblue
post 11.10.2015, 12:03:49
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Comandeer
post 11.10.2015, 12:04:15
Post #3





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

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


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
adbacz
post 11.10.2015, 13:06:34
Post #4





Grupa: Zarejestrowani
Postów: 532
Pomógł: 24
Dołączył: 15.04.2011
Skąd: Kalisz

Ostrzeżenie: (0%)
-----

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ł.

Ten post edytował adbacz 11.10.2015, 13:09:10
Go to the top of the page
+Quote Post
trueblue
post 11.10.2015, 13:32:01
Post #5





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
adbacz
post 11.10.2015, 14:23:40
Post #6





Grupa: Zarejestrowani
Postów: 532
Pomógł: 24
Dołączył: 15.04.2011
Skąd: Kalisz

Ostrzeżenie: (0%)
-----

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ć.
Go to the top of the page
+Quote Post
Comandeer
post 11.10.2015, 15:38:41
Post #7





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

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>


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
adbacz
post 12.10.2015, 14:16:29
Post #8





Grupa: Zarejestrowani
Postów: 532
Pomógł: 24
Dołączył: 15.04.2011
Skąd: Kalisz

Ostrzeżenie: (0%)
-----

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 
  1. var doc = iFrame.contentWindow.document;
  2. doc.open();
  3. doc.writeln('<!doctype html>' + '<html><head>' + '<title>' + title + '</title>' + '</head><body>' + contentToChange + '</body></html>');
  4. doc.close();
[JAVASCRIPT] pobierz, plaintext


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

Ten post edytował adbacz 12.10.2015, 14:18:14
Go to the top of the page
+Quote Post
Comandeer
post 12.10.2015, 15:02:01
Post #9





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

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


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
adbacz
post 12.10.2015, 15:42:43
Post #10





Grupa: Zarejestrowani
Postów: 532
Pomógł: 24
Dołączył: 15.04.2011
Skąd: Kalisz

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 20.07.2025 - 10:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn