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?

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.

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.

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();

---