Freinet-Iframe Addons

Verbessern Sie die Darstellung der Freinet-Iframes

Fügen Sie die dynamische Höhenanpassung ein
Ermöglichen Sie den direkten Aufruf einer Detail-Seite
Scrollen Sie zum Kopf ihrer Seite

1) Den Freinet-Iframe mit dynamischer Höhenanpassung
(dem „iframeResizer“) nutzen

Sie möchten den Engagement-IFrame von Freinet in Ihrer Webseite benutzen?

Dann werden Sie sicherlich Bekanntschaft mit den Scrollbalken innerhalb Ihrer Webseite machen

Um diese Scrollbalken zu vermeiden, gibt es ein kleines, feines Skript von David J. Bradshaw, welches die Scrollbalken vermeidet, indem es automatisch die Höhe iframes an die Höhe des Inhaltes anpasst. (siehe unten)

Sofern Sie auf Ihrer Seite noch keine jquery.js nutzen, benötigen Sie diese Bibliothek:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Desweiteren benötigen Sie die IframeResizer.js, welche Sie auf Ihrem Server (unter der Domain Ihrer Webseite) bereitstellen müssen.

<script type="text/javascript" src="./pfad_zur_datei/iframeResizer.min.3516.js"></script>

Sie können hier die Version 2.8.1.0 oder 3.5.16 herunterladen. (V. 2.8.1.0 ist kleiner, und für Freinet ausreichend)
Hier finden Sie die offiziellen GitHub-Seite (Wir unterstützen derzeit aber max Version 4.1.1.)

Beide Skripte sollten Sie innerhalb von <head>-Bereich ihres Dokuments einbauen:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="./pfad_zur_datei/iframeResizer.min.3516.js"></script>
</head>

Einbau des Iframes

<iframe id="fn_iframe" name="fn_iframe"
    src="https://www.freinet-online.de/query/iframe/input-output.php?agid={agentur_id}&styleid={style_id}&frametyp={frametyp}&jqh=3516"
    style="width:100%; height:550px; margin:0; padding:0; border:none;"
    align="left"  scrolling="auto" allowTransparency="true">
    <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:<br>
    Sie können die eingebettete Seite über den folgenden Verweis aufrufen:<br>
    <a href="https://www.freinet-online.de/query/iframe/input-output.php?agid={agentur_id}&styleid={style_id}&frametyp={frametyp}">Aktuelle Angebote</a></p>
</iframe>

Bitte beachten Sie, daß der Parameter in geschweiften Klammern ersetzt werden müssen. z.B.
{agentur_id} durch die MandantenID (AgenturID) Ihres Freinet-Accounts
Ausserdem sollte &jqh=2810 (bzw. &jqh=3516, je nach Version) an die URL angehängt werden, damit Freinet die Bibliothek einbindet.

Einbau des javascripts

Unterhalb des Iframes muss jetzt nur noch das Script zum starten des iframeResizers aufgerufen werden:

Version 2.8.10:

<script  type="text/javascript">
$('#fn_iframe').iFrameResize( [{
    autoResize: true,
    log			: true, // Enable console logging
    enablePublicMethods	: true, // Enable methods within iframe hosted page
    checkOrigin	 	: false
}] );
</script>

Version 3.5.16:

<script type="text/javascript">
iFrameResize({log:true,
              autoResize: true,
              checkOrigin:false},
              '#fn_iframe')
</script>

Das Ergebnis ist ein Iframe ohne Scrollbalken

(Inhalte, die unterhalb des Iframes eingefügt sind, werden mit nach unten geschoben)

2) Weitere Tipps zum Iframe

2.1) Direkter Aufruf einer Detailseite

Um im Iframe, der in Ihrer Webseite platziert ist, eine ›Detailseite eines Angebots‹ aufzurufen, gibt es folgende Möglichkeiten

Fügen Sie in Ihrer Webseite folgendes Snippet hinzu (nachdem JQuery initialisiert ist):

<script type="text/javascript">
/*
* Freinet Helper Function to get UrlParameter
*/
var FN_getUrlParameter = function FN_getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};

/*
* Freinet DetailLoader Function to switch Iframe to DetailPage
 */
jQuery( document ).ready(function($) {
    var fn_detail_id = FN_getUrlParameter('fn_detail'); // get UrlParameter
    if (fn_detail_id>0)
    {
        var fn_parameter='agid={agentur_id}&styleid={styleid}&frametyp=2&jqh={jquery_height_version}'; // bestpractice additional Freinet-Iframe-Detail-Page
        var fn_url='//www.freinet-online.de/query/iframe/detail.php?'+fn_parameter+'&detail='+fn_detail_id;
        $('#fn_iframe').attr('src',fn_url);
    }
});
</script>

Bitte ersetzen Sie entsprechenden Parameter, mit den Werten für Ihren Iframe
{agentur_id} - Hier muss Ihre Agentur ID stehen
{styleid} - Hier muss die StyleId des aktuellen Iframes stehen
{jquery_height_version} - Sofern Sie die dynamische Höhenanpassung nutzen, können Sie hier die Versionsnummer übergeben

Um nun eine Detailansicht aufzurufen, brauchen Sie lediglich an die URL, unter der unser Iframe zu finden ist, den Parameter fn_detail={angebot_id} hinzuzufügen, z.B.:
https://www.unsere-webseite.de/engagementsuche/?fn_detail=123456

2.2) „Klick im Iframe“ soll zum Seitenanfang der Eltern-Seite scrollen

Wenn innerhalb des Iframes auf einen Link geklickt wird, springt die Eltern-Seite nicht nach oben.
Sofern Sie dieses Verhalten wünschen, können Sie folgendes Snippet verwenden

<script type="text/javascript">
    /*
    * Dieses Snippet scrollt an den Kopf der Seite, nachdem der Iframe geladen wurde
    * Dadurch muss man zum Inhalt runterscrollen, wie bei Seiten ohne Iframe
    */
    jQuery('iframe#fn_iframe').load(function($) {
        document.body.scrollIntoView();
        console.log("Scrolling...");
    });
</script>

3) Anmerkungen

2019-07-29
Bei einigen Kunden funktionierte die herkömmliche Variante nicht zufriedenstellend.
In diesen Fällen half der Parameter heightCalculationMethod: 'lowestElement'
siehe auch https://stackoverflow.com/questions/31688999/iframe-resizer-not-resizing

<script type="text/javascript">
iFrameResize({log:true,
        heightCalculationMethod: 'lowestElement',
        checkOrigin:false},
        '#fn_iframe');
</script>

freinet-online.de