Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: Javascript Frage

  1. #1
    Alter Contao-Hase
    Registriert seit
    06.07.2009.
    Beiträge
    1.487

    Standard Javascript Frage

    Hallo Leute,

    ich hoffe jemand kann mir hier fix helfen:

    Ich habe zwei Seiten. Eine davon enthält eine Anwendung die auf der anderen Seite ausgeben werden soll (Iframe).

    Die Höhe des Iframes kann ich dabei über einen Resizer-Script beeinflussen.

    Das klappt auch alles wunderbar... bis auf bei Accordeon-Elementen:

    Accordeon offen:

    Code:
    <a href="javascript:void(0);" class="collapse_btn accordion-toggle" data-toggle="collapse" data-target="#cnc-g-10" aria-expanded="true">Test</a>
    Accordeon geschlossen

    Code:
    <a href="javascript:void(0);" class="collapse_btn accordion-toggle collapsed" data-toggle="collapse" data-target="#cnc-g-10" aria-expanded="false">Test</a>
    Meine Javascript Listener:

    Code:
     
    
    window.onload = () => sendPostMessage();
    window.onresize = () => sendPostMessage();
    window.onclick = () => sendPostMessage();
    document.getElementsByClassName('collapsed').onclick = () => sendPostMessage();
    Aber irgendwie reagiert er auf onclick in dem Fall nicht.

    Auch ohne onclick geht es nicht. Nun dachte ich, ich prüfe einfach den aria-expanded-Status... nur habe ich null Ahnung wie ich das mache?

  2. #2
    Contao-Nutzer
    Registriert seit
    03.06.2019.
    Beiträge
    158
    Partner-ID
    11715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich schätze mal, dass die Klasse 'collapse' erst nach Klick im Element steht und der Selektor somit nicht zu Beginn greift. Kann das sein?

    Ansonsten kannst du mit
    Code:
    document.querySelector('[aria-expanded]').onclick = () => sendPostMessage();
    // document.querySelectorAll('[aria-expanded]')
    auf Attribute zugreifen.
    Geändert von Doi (11.01.2022 um 13:43 Uhr)

  3. #3
    Alter Contao-Hase
    Registriert seit
    06.07.2009.
    Beiträge
    1.487

    Standard

    Irgendwie erkennt der das nicht als onclick ....

    Code:
    const sendPostMessage = () => {
        if (height !== document.getElementById('resize').offsetHeight) {
          height = document.getElementById('resize').offsetHeight;
          window.parent.postMessage({
            frameHeight: height
          }, '*');
          console.log(height);
        }
      }
    Das ist die Funktion die aufgerufen wird. Bei allen Aktionen, bis auf das Öffnen und Schließen der Accordeons, funktioniert das Script. Bei den Accordeons ist es wie als wenn er die höhe nicht neuberechnet.

  4. #4
    Alter Contao-Hase
    Registriert seit
    06.07.2009.
    Beiträge
    1.487

    Standard

    So nochmal geschaut...

    Im Startzustand sind die Accordeons zu:


    Code:
    <a href="javascript:void(0);" class="collapse_btn accordion-toggle collapsed" data-toggle="collapse" data-target="#cnc-g-10" aria-expanded="false">Test</a>
    Es gibt mehrere davon auf der Seite.

    Die Height steht bei 1022.

    Klick ich auf den Toggler, öffnet sich das Accordeon und eine neu Berechnung der Höhe findet nicht statt.

    Code:
    <a href="javascript:void(0);" class="collapse_btn accordion-toggle" data-toggle="collapse" data-target="#cnc-g-10" aria-expanded="true">Test</a>
    Klick ich erneut auf den Toggler, schließt sich das Accordeon und die Konsole logt folgende Werte

    select2?md=1:1727 1682
    select2?md=1:1719 1630
    select2?md=1:1719 1533
    select2?md=1:1719 1402
    select2?md=1:1719 1287
    select2?md=1:1719 1230
    select2?md=1:1719 1159
    select2?md=1:1719 1108
    select2?md=1:1719 1071
    select2?md=1:1719 1046
    select2?md=1:1719 1031
    select2?md=1:1719 1023
    select2?md=1:1719 1022

    Die 1682 wäre die Korrekte Größe. Die 1022 ist wieder die Ausgangsgröße. Die Werte dazwischen ergeben sich aus dem Öffnungseffekt des Accordeons.

    Jetzt Frage ich mich. Warum wird der Klick zu erkannt... aber der Klick auf nicht?
    Das hab ich aktuell alles drin stehen...Bisher ohne Erfolg.
    Code:
      window.onload = () => sendPostMessage();
      window.onresize = () => sendPostMessage();
      window.onclick = () => sendPostMessage();
      document.onclick = () => sendPostMessage();
    document.querySelector('[aria-expanded]').onclick = () => sendPostMessage();

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •