WP Plugin für die Einbindung von Angeboten per Inline-Frame

Ausgewählte Angebote von Amazon nach onload laden

Bei der auf der letzten Seite vorgestellten Lösung bindet ein Browser den iFrame wie jedes andere Inline-Element bereits beim Laden des Dokumentes ein und sendet einen Request, um die im Inline-Frame referenzierte Webseite vom Server anzufordern. Der Server wiederum parst das Script der angeforderten Webseite und sendet einen Request an den Server von Amazon, insofern die XML nicht aus dem Cache geladen wird. Doch nicht immer ist der zeitliche Ablauf so gewünscht, zum Beispiel dann nicht, wenn die Ladezeit der einbindenden Webseite verringert werden soll.

Eine Alternative würde darin bestehen, den erforderlichen Request erst nach onload mit Hilfe eines Ajax-Scripts zu senden, also erst dann, wenn sich das Fenster mit der Webseite bereits aufgebaut hat. Doch auch ein iFrame lässt sich mit DOM-Methoden erst nach onload in den Dokumentenbaum einfügen. Nachfolgend möchten wir ein kleines Plugin vorstellen, das einen iFrame erst nachdem Laden der Webseite an einen für diesen Inline-Frame vorgesehenen Platz in den Dokumentenbaum schreibt.

Übersicht:

• Inline-Frame für die Einbindung (einfache Variante)
• Inline-Frame für die Einbindung (onLoad-Variante für kürzere Ladezeiten als Plugin)
• Script für Seite im iFrame (für Websites mit responsiven Webdesign geeignet)

Das erste Script, welches das eigentliche Plugin beinhaltet, ist nicht sehr umfangreich, da es praktisch nur den iFrame und eine JavaScript-Funktion enthält. Dabei wird die den iFrame einbindende Funktion ‘fuegeFrameEin’ durch die Methode addEventListener  aufgerufen und um für ältere IE Versionen abwärtskompatibel zu bleiben, durch die Methode attachEvent.

Die im Frame referenzierte Seite angebote-einholen.php übernimmt hingegen die eigentliche Arbeit, wozu die Durchführung von Request ebenso gehört, wie das Cachen und das Auslesen von XML-Dateien oder die Anpassung der Höhe und Breite des iFrames bei der Ausgabe in Abhängigkeit vom zur Verfügung stehenden Platz im Template.
Da das Script für die angebote-einholen.php etwas länger wurde, stellen wir das Code-Listing in einem anderen Webprojekt vor:  Script für Seite im iFrame

<?php
/*-----------------------------------------------------------------------------------
 Plugin Name: HM-AngebotsBlende
 Dateiname:   angebote-onload.php
 Plugin URI:  http://www.coder-welten.com/einbinden-von-produkten-und-angeboten/
 Description: Inline-Frame für die Einbindung von ausgewählten Produkten und Angeboten mit Shortcode.
 Author:      Horst Müller
 Version:     Release 1.00
 Author URI:  http://www.coder-welten.com
 Datum:       21. September 2013
 License:     GPL v2 und Lizenz für Software

 *  PHP- und HTML-Code der Pluginseite angebote-onload.php stehen unter der GNU General Public License (GPL) Version 2
 *  http://www.gnu.org/licenses/gpl-2.0.txt
 *  JavaScript- und CSS-Code sowie die Angebotsseite angebote-einholen.php stehen unter der Lizenz für Software vom Verlag
 *  http://www.coder-welten.de/projekte/lizenz-fuer-software.htm

 Copyright:   © 2006/2013 - Verlag Horst Müller - Stendal
-------------------------------------------------------------------------------------
*/
add_shortcode("angebote_von_amazon", "einbinden_von_onload_angeboten");

function einbinden_von_onload_angeboten($atts) {

    /*-------------------------------------------------------------------------------
     Die Breite und Höhe des iFrames werden durch JavaScript angepasst.
    ---------------------------------------------------------------------------------
    */
    $urlpfad = plugins_url("angebote-einholen.php", __FILE__);
    $dwidth  = 620;
    $dheight = 200;
    $rubrik  = $atts["rubrik"];
    $artikel = $atts["artikel"];
    $rubrik  = preg_replace("/[^a-z]/i", "", $rubrik);
    $artikel = preg_replace("/[^a-z0-9-]/i", "", $artikel);

    $deframe = "<div id=\"platzhalter\">Platzhalter für Angebote</div>\n".
    "<script type=\"text/javascript\">\n".
    "\"use strict\";\n".
    "if (window.addEventListener) {\n".
    "\twindow.addEventListener(\"load\", fuegeFrameEin, false);\n".
    "}\n".
    "else if (window.attachEvent) {\n".
    "\twindow.attachEvent(\"onload\", fuegeFrameEin);\n".
    "}\n".
    "function fuegeFrameEin() {\n\n".
    "\tvar fuegeein = \"<p><iframe id='angebote' name='angebote' ".
    "src='".$urlpfad."?rubrik=".$rubrik."&amp;artikel=".$artikel."' ".
    "style='width:".$dwidth."px; height:".$dheight."px; overflow:hidden; border:none'>".
    "</iframe></p>\";\n".
    "\tdocument.getElementById(\"platzhalter\").innerHTML = fuegeein;\n".
    "}\n".
    "</script>\n";

    return $deframe;
}
?>

Das vorgestellte Plugin mit dem Script für die Seite im iFrame in Aktion: