Temat: JavaScript CSS API Selector i elementy tworzone przez...

Witam.
Czy ktoś wie jak wyszukać i zaznaczyć element (np a.a) na stronie, który jest dodawany do niej za pomocą zewnętrznego skryptu? Skrypt służy do wyświetlania reklam i jest na serwerze zewnętrznym więc jego modyfikację odpadają.
Niestety ani getElementsByTagName ani querySelectorALL nie dają rady. Wyszukują każdy element znajdujący się w dokumencie pod warunkiem istnienia przy ładowaniu strony i nie potrafią wyszukać elementu wygenerowanego dynamicznie (całość jest na zasadzie: div o konkretnej klasie do którego jest wczytywana treść skryptu w połączeniu ze stylem CSS, efektem tego jest wygenerowanie boxa z reklamami, każda reklama jest elementem a o klasie a oraz klasie nx gdzie x jest cyfrą od 1 w górę i zależy od ilości reklam).

Jeżeli piszę nieskładnie to przepraszam i chętnie spróbuję wytłumaczyć o co chodzi dokładniej.
Generalnie pytanie brzmi jak wykorzystać selektory czystego JS (bez jQuery itp) do wyszukania elementu wygenerowanego dynamicznie.

Pozdrawiam

Temat: JavaScript CSS API Selector i elementy tworzone przez...

Tak, zwykly JS robi takie cuda. Jesli nie mozesz znalezc to albo szukasz zlej rzeczy... albo robisz to za wczesniej (zanim element faktycznie zostal dodany do strony). Prawdopodobnie skrypt ktory generuje to co szukasz, jest ladowany asynchronicznie, wiec nawet jesli zrobisz document.ready to i tak odpalic sie moze za wczesnie.

Prosty test... rob to co robisz ale dodal interval na 5 sekund ... albo 10 i zobacz czy zacznie moze dzialac. Jak tak - to masz odpowiedz.

Temat: JavaScript CSS API Selector i elementy tworzone przez...

Musisz pokazać jakiś przykład czy coś. Non stop operuję w jednym projekcie na elementach tworzonych dynamicznie i nie ma z tym najmniejszego problemu jeżeli dokument HTML jest prawidłowy. Można się bawić odpowiednimi metodami (rodzina getElement*) albo selector API.

Temat: JavaScript CSS API Selector i elementy tworzone przez...

DIV zawierający skrypt i jego opcje konfiguracji:

<div class="DivZReklama">

  <script type="text/javascript">

    /* Please do not modify code in next 3 lines */

    m3ads_system = "Germany";

    m3ads_partnernumber = 1287;

    m3ads_sectors = "23";

    /* You are allowed to modify from here  */

    m3ads_numberadverts = 3;

    m3ads_includeimages = 1;

    m3ads_ip = "195.71.11.67";

    m3ads_cssurl = "css/styl.css";

    

  </script>

  <script type="text/javascript" src="http://cdn.www.mirago.de/feed/_resources/scripts/jsAds-1.3.min.js"></script>

  </div>

Skrypt tworzy kod HTML w elemencie o klasie .M3Adverts, dodaje do niego 2x element DIV wewnątrz ostatniego z nich tworzony jest element a o klasie .a zawierający reklamę (składa się ona z kilku bloków wewnątrz elementu a, obraka, tytulu, tresci i adresu strony).

Generalnie jQuery nie ma z tym problemów, jak i wiele innych bibliotek. Natomiast w JS nie mogę wpłynąć na element w żaden sposób.
Załóżmy, że plik JS zwierał będzie tylko:

function testowa() {

    var xyz = document.body.querySelector(".DivZReklama")

    xyz.setAttribute("id", "DivZReklama");

    var qwe = document.body.querySelectorAll('div#DivZReklama a.a');

    qwe.setAttribute("id","a");

    var rty= asd.getElementById("a")

    rty.style.color='#ffffff';

 }

 window.onload = testowa();

ot tak dla przykładu ma wyszukać element po klasie i nadać mu ID dla wygodniejszego operowania. Niestety jak przy DIVie będącym częścią kodu strony wyszukanie i dodanie ID działa tak przy dalszym elemencie już nie. Powyżej jest tylko banalny i zapewne nie do końca poprawny przykład mający na celu sprawdzenie działania dodawania ID i stylu do elementu a.a.

Generalnie szukam już trochę w tym kierunku ale nie mogę dobrze dobrać zapytania dla wyszukiwarki, zazwyczaj znajduje rzeczy dotyczące zupełnie innych zagadnień (głownie AJAX i jego statusy). Chodzi jedynie o wyszukanie i dodanie ID do tego nieszczęsnego a.a.

PS.
Interval był testowany zaraz po Timeout.Marcin Matuszewski edytował(a) ten post dnia 22.10.12 o godzinie 12:50

Temat: JavaScript CSS API Selector i elementy tworzone przez...

<div class="DivZReklama">
<script type="text/javascript">
</script>

Czyli reklama jest osadzana podczas ładowania treści strony ? To znaczy, że na onDOMLoaded kontent, który skrypt dostarcza jest już do dyspozycji ? Być może masz race condition. Być może lepiej będzie sprawdzić bezpośrednio zawartość childNodes dla kontenera, w którym osadzasz reklamę. Weź jakieś live demo wystaw.

Temat: JavaScript CSS API Selector i elementy tworzone przez...

Albo skrypt wrzuć na interval i niech czeka na pojawienie się reklamy jeżeli jest ładowana z opóźnieniem.

Temat: JavaScript CSS API Selector i elementy tworzone przez...

... a może by "podpatrzeć" troche google ;)

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

+ użyć coś w stylu ga.onreadystatechange ??? tak z głowy - nie testowaneMirosław R. edytował(a) ten post dnia 23.10.12 o godzinie 23:36

Temat: JavaScript CSS API Selector i elementy tworzone przez...

można też spróbować z podpięciem event'u DOMNodeInserted
pod div.DivZReklama
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Ev...

pod ie też są na to patenty..

Temat: JavaScript CSS API Selector i elementy tworzone przez...

$.getScript('jakisurl.js', function() {



	$('.dynamiczny-selektor-z-biblioteki');

});

1) Przykład oparty o jQuery. Więcej loaderów: Sposoby wczytywania JavaScript. Większość tych bibliotek ma otwarty kod i leży na GitHubie - czekają na Ciebie, byś tam zajrzał i nauczył się czegoś nowego :)

2) Ingerowanie w wygenerowany przez zewnętrzną bibliotekę kod jest raczej brzydkim rozwiązaniem - zewnętrzne biblioteki powinny mieć jakieś API albo się ich nie używa. Co zrobisz jeśli zaczną modyfikować kod 3 razy dziennie?

// edit

3) Jeszcze zauważyłem, że sprawa dotyczy ingerowania w jakiś system reklamowy. Takie skrypty są dodatkowo zabezpieczane przed clickjackingiem, więc ingeracja w wygenerowany kod powinna być utrudniona (i prawidłowo).Kamil Brenk edytował(a) ten post dnia 25.10.12 o godzinie 22:30

Temat: JavaScript CSS API Selector i elementy tworzone przez...

Kamil, z tego co widzę to jQuery'owy getScript robi po prostu request http po treść skryptu.
To by oznaczało, że musi zrobić na nim eval'a.
Bardzo brzydko i nie polecam.

W JavaScriptcie, po prostu załaduj skrypt dynamicznie i podepnij callback:

      function loadScript(url, callback) {

          var script = document.createElement('script'),

              entry,

              readyHandler;



          script.type = 'text/javascript';

          script.async = true;

          script.src = url;



          entry = document.getElementsByTagName('script')[0];

          entry.parentNode.insertBefore(script, entry);



          if (script.addEventListener) {

              script.addEventListener('load', callback, false);

          } else {

              script.attachEvent('onreadystatechange',

              readyHandler = function () {



                  if (/complete|loaded/.test(script.readyState)) {

                      callback();

                      

                      //Fix dla IE - pamięć cieknie.

                      script.detachEvent('onreadystatechange', readyHandler);

                  }

              });

          }

      }

Temat: JavaScript CSS API Selector i elementy tworzone przez...

Witam i przepraszam za ciszę lecz moja maszyna odmówiła współpracy ;]
Generalnie doczytywanie skryptów obu dynamicznie nie wchodziło w grę.
Cały problem został rozwiązany za pomocą po prostu warunku (if) oraz setInterval. W skrócie. Skrypt na początku inicjuje interwał i gdy dany warunek zostanie spełniony uruchamia resztę skryptu (animację itp). Całość działa po prostu na porównaniu zdefiniowanej ilości reklam ( w konfiguracji owych w poliku index itp) z ilością obiektów pasujących do querySelectorAll.
Nie jest to może górnolotne rozwiązanie lecz spełnia swoje zadanie i inicjuje całość we właściwym momencie.
Mam jeszcze jedno małe pytanko.
Co może wpływać na późny start skryptu (np animacji) ?
Całość w zależności od rozmiaru reklamy itp startuje z różnym opóźnieniem (powinno około 6-8 sekund po wczytanie się owych a startuje np po 20 czy 30 sekundach). Sam kod jest raczej lekki. Całość waży około 2kB ( po kompresji około 1.3kB).
Kodu nie wrzucam, bardziej mi zależy na informacji od czego jest zależne takie opóźnienie w starcie (wykonuje się wszystko jak trzeba, tylko animacja startuje z późnieniem).
Pozdrawiam serdecznie i dziękuję za wcześniejsze porady.

Temat: JavaScript CSS API Selector i elementy tworzone przez...

Marcin Matuszewski:
Generalnie doczytywanie skryptów obu dynamicznie nie wchodziło w grę.

czemu ???

Cały problem został rozwiązany za pomocą po prostu warunku (if) oraz setInterval. W skrócie. Skrypt na początku inicjuje interwał i gdy dany warunek zostanie spełniony uruchamia resztę skryptu (animację itp). Całość działa po prostu na porównaniu zdefiniowanej ilości reklam ( w konfiguracji owych w poliku index itp) z ilością obiektów pasujących do querySelectorAll.
Nie jest to może górnolotne rozwiązanie lecz spełnia swoje zadanie i inicjuje całość we właściwym momencie.

... ja bym nie był pewien że spełnia ;)

Mam jeszcze jedno małe pytanko.
Co może wpływać na późny start skryptu (np animacji) ?
Całość w zależności od rozmiaru reklamy itp startuje z różnym opóźnieniem (powinno około 6-8 sekund po wczytanie się owych a startuje np po 20 czy 30 sekundach). Sam kod jest raczej lekki. Całość waży około 2kB ( po kompresji około 1.3kB).

... moze zalezeć od wszystkiego, bez szczegołów to takie gdybanie....