Freinet-Iframe Addons
Zu unseren Api-BeschreibungenVerbessern 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><script type="text/javascript" src="./pfad_zur_datei/iframeResizer.min.3516.js"></script>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>
{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:
<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>
<script type="text/javascript">
iFrameResize({log:true,
autoResize: true,
checkOrigin:false},
'#fn_iframe')
</script>
Das Ergebnis ist ein Iframe ohne Scrollbalken
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>
{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>