Support » Allgemeine Fragen » Automatische Höhenanpassung

  • Hallo liebe Community,

    ich habe folgendes Problem:

    Ich habe einen Blog http://www.my-vr-bank.de/fragmyvrbank

    diesen Blog möchte ich als externen Inhalt in Adobe CQ5 auf die Seite https://www.vr-bank-alzenau.de/my-vr-bank/marke0/my-vr-serviceversprechen/frag-my-vr-bank.html bringen.

    Wie man sehen kann, funktioniert das grundsätzlich auch. Der Inhalt wird über ein Iframe eingebunden.

    Nun möchte ich aber die automatische Höhenanpassung nutzen. Vom Support wurde mir nur ein „Beispiel-Code-Schnipsel“ gemailt.
    Auf der eigentlichen Homepage http://www.vr-bank-alzenau.de habe ich die automatische Höhenanpassung aktiviert. Nun muss nur noch der WP-Blog dafür vorbereitet sein.

    Ich nutze aktuell das Griffin-Theme.

    Der Beispiel-Code-Schnipsel welchen ich bekommen habe lautet:

    var eventMethod = window.addEventListener ? „addEventListener“ : „attachEvent“;
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == „attachEvent“ ? „onmessage“ : „message“;
    var thisSiteHeight = $(‚body‘).height();
    eventer(messageEvent, function(event) {

    // Daten-String, welcher von der webCenter-Seite gesendet wird, z.b. „height-2“
    var data = event.data;

    // falls keine Daten gesendet wurde abbrechen
    if (!data || data.length === 0) {
    return;
    }

    // Daten in ein Array konvertieren
    data = data.split(‚-‚);

    // das Array hat immer zwei Eintraege
    if (data.length !== 2) {
    return;
    }

    // der erste Wert ist immer „height“, falls nicht abbrechen
    if (data[0] !== ‚height‘) {
    return;
    }

    // der zweite Wert ist immer numerisch, falls nicht, abbrechen
    // dies ist der Wert, mit dem wir den iframe identifizieren koennen
    var id = parseInt(data[1], 10);
    if (isNaN(id)) {
    return;
    }

    // aktuelle Hoehe als String zur webCenter-Seite senden
    // Format: id-hoehe-scrollposition z.b. 2-300-0
    event.source.postMessage(id + ‚-‚ + thisSiteHeight + ‚-0‘, event.origin);
    }, false);

    Könnt ihr mir helfen?
    Ich habe schon einiges versucht diesen Code einzufügen, aber das funktioniert nicht.

    Vielen Dank schon im Vorraus,

    Max (HoessiAB)

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Ich habe schon einiges versucht diesen Code einzufügen, aber das funktioniert nicht.

    Wie hast du es versucht und warum ist es gescheitert?

    Kennst Du die Funktion wp_enqueue_script?

    Gruß, Torsten

    Thread-Starter HoessiAB

    (@hoessiab)

    Ich habe versucht diesen Code mit <script>“CODE</script> im <head> einzufügen, weil ich mal irgendwo gelesen habe, dass es wohl dorthin gehört.
    ->Kein Ergebnis

    Dann habe ich das Script so ziemlich überall mal eingefügt und geschaut ob es irgendwo zum Erfolg führt, aber auch hier -> Kein Ergebnis.

    Ich kenne wp_enqueue_script nicht, und hab auch nicht wirklich verstanden, was ich damit machen kann…

    Kannst du mir helfen?

    Torsten hat doch sogar einen Link zu der Dokumentation von wp_enqueue_script() beigefügt?!

    <del>Ansonsten hat Kirsten das ganz gut erklärt:
    http://die-netzialisten.de/wordpress/jquery-richtig-einbinden-mit-wp_enqueue_script/ </del>

    Ähm, OK, der Artikel von Kirsten hat einen kleinen Schönheitsfehler. Ich versuche mal, eine kurze Beschreibung zu geben:

    Möchte man in WordPress-Themes JavaScript verwenden, sollte man dabei zwei Dinge berücksichtigen:

    1. Installiert der Anwender Plugins, können diese ggf. eigene JavaScript-Dateien enthalten, die dann mit der JavaScript-Datei des Themes in Konflikt geraten.
    2. Themes sollten nach Möglichkeit so flexibel sein, dass man später z.B. in einem Child Theme bequem eingebundene JavaScript-Dateien gegen eigene Versionen austauscht. Das geht nur, wenn das JavaScript nicht fest einprogrammiert ist (also durch z.B. <script>-Tag in header.php oder footer.php).

    Die Lösung bei WordPress ist, dass man in der functions.php des Themes JavaScript-Dateien mit der Funktion wp_enqueue_script() einbindet. Die Syntax dazu ist

    wp_enqueue_script(
      $handler, // eigene Bezeichnung für das eingebundene JavaScript
      $src, // Quelle der Datei
      $deps, // Abhängigkeit von anderen JavaScript-Dateien, z.B. jQuery
      $ver, // Version des Scripts
      $in_footer // ob das JavaScript im Header oder Footer eingebunden werden soll
     );

    Da Funktionen grundsätzlich mit entsprechenden Schnittstellen (Hooks) verwendet werden sollten, ergibt sich daraus z.B.

    add_action( 'wp_enqueue_scripts', 'binde_mein_script_ein');
    
    function binde_mein_script_ein() {
      wp_enqueue_script(
        'bank-script,
        get_stylesheet_directory_uri() . '/js/bank_script.js',
        array(),
        '1.0',
        false);
     }

    Möchte man zu einem späteren Zeitpunkt eine Änderung vornehmen, geht das wesentlich leichter, indem man das Script mit der WordPress-Funktion wp_dequeue_script( ‚bank-script‘); wieder entfernt und ggf. ein anderes einbindet. Auch die Pflege deines Themes ist einfacher, weil der Aufbau modular ist – man findet einfach schneller, wo das JavaScript eingebunden ist.

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das Thema „Automatische Höhenanpassung“ ist für neue Antworten geschlossen.