IBE einfügen Wordpress via iframe

Urlaub · 13. Mai 2020

Hallo

ich habe die Aufgabe eine Buchungsmaschine auf eine Wordpress Webseite einzubinden. Ich habe dazu einen Code bekommen, der nicht so funktioniert, wie ich mir das vorstelle. Ich hätte gerne die komplette Ansicht (responsive) der Buchungsmaschine auf der Seite (Suchen & Buchen) und nicht nur ein kleines Fenster.

Code:

Seite: https://kurzvorurlaub.de/suchenundbuchen/

Hoffe jemand kann mir weiter helfen.

nextuser · 13. Mai 2020

Ich weiss nicht, wo dein Problem ist. wenn ich das iframe auf deiner Seite mit width:100% und einer entsprechenden Höhe setze, so geht das ohne Probleme.

Urlaub · 13. Mai 2020

Wenn ich zb bei height="1000" einsetze ändert sich bei mir nichts. Es ist immer noch so klein. Muss ich noch irgendwo einen Code einfügen? Ich habe bei Wordpress jetzt einfach über Block einfügen -> HTML -> Dort den Code eingefügt.

basti1012 · 13. Mai 2020

hast du dir mal den quellcode angeschaut was im Browser ankommt ?

PHP

<iframe src="https://ibe.traffics.de/1100001280000000/pauschalreise/regionen?minCategory=3&#038;sortBy=quality&#038;sortDir=up&#038;searchDate=200520,030620,7&#038;adults=2&#038;minBoardType=OV/" <?php echo urldecode($_GET['target']); ?>&#8220; height=&#8220;100%&#8220; width=&#8220;100%&#8220;></iframe>

das height und width sieht man bei mir in der Console nicht , erst wenn man Quelltext anzeigen läßt

und der lesbare Php Code ist da erst recht Fehl am Platz

Denk dran.

Du kannst den Iframe zwar responsiv machen , aber der Inhalt scheint ja von einer Fremdseite zu kommen und wenn du darauf kein zugriff hast macht der Inhalt des Iframes das was auf der Domain angegeben wurde

nextuser · 13. Mai 2020

Setz im iframe die Abmessungen im style-Attribute oder gib ihm ne id und mach das in CSS

Urlaub · 13. Mai 2020

Vielen Dank, es ist jetzt schon mal größer. Ich würde es gerne wie auf der unten aufgeführten Seite haben. Einfach das Menü der Seite oben und da drunter groß die Buchungsmaschine. Ich bin Anfänger und versuche mich da gerade durchzufuchsen, aber das ist doch gar nicht so einfach.

nextuser · 13. Mai 2020

Meinst du so:

html-seminar.de/woltlab/attachment/2396/

Oder eher Seitenfüllend:

html-seminar.de/woltlab/attachment/2397/

Bei den paar Sachen hast du aber ne menge unnötiger Verschachtelungen und etwas zu wenig Struktur drinn.

Urlaub · 13. Mai 2020

Genauso wie auf dem zweiten Bild. Ja wie gesagt, ich bin absoluter Anfänger und bin immer für Tipps und Verbesserungen offen.

nextuser · 13. Mai 2020

Dann musst du den Eltern-Containern entsprechend volle Höhe geben.

Urlaub · 13. Mai 2020

Ich habe jetzt mal ein wenig rumprobiert, finde aber nicht den richtigen Weg. Wo und wie kann ich den Eltern-Containern volle Höhe geben?

nextuser · 13. Mai 2020

Das meinte ich ja mit den vielen Verschachtelungen. Dem direkten Elternelement "height:100%" zu geben bringt

nicht viel, wenn deren Elternelement nicht auch 100% Höhe hat.

Musst also bei der "Wurzel" anfangen.

Vielleicht nutzt du dabei die Gelegenheit und machst deinen Code ein wenig kompakter...

Urlaub · 14. Mai 2020

Wo und wie komme ich über Wordpress an die Wurzel?

Das sind die einzigen Codes die ich bearbeiten kann:

<p class="has-text-align-center"><a href="https://kurzvorurlaub.de/datenschutz/">Datenschutz</a></p>

Da ich wie gesagt wenig Ahnung habe, würde ich wohl alles zerstören, wenn ich den Code kompakter machen wollen würde. Zumal ich nicht mal weiß wie ich daran komme.

Sempervivum · 14. Mai 2020

Wenn ich die Seite aus deinem Eingangsposting https://kurzvorurlaub.de/suchenundbuchen/ aufrufe, füllt der iFrame die Seite aus. Hast Du das Problem inzwischen lösen können oder übersehe ich da etwas?

Urlaub · 14. Mai 2020

Ich habe es mithilfe eines Plugins (Yellow Pencil) auf die Größe ziehen können. Jetzt habe ich aber das Problem, dass die Buchungsmaske sich nicht automatisch unten verlängert wenn man sich dort Suchergebnisse anzeigen lässt.

nextuser · 14. Mai 2020

Hast du mit dem Plugin das Ding jetzt einfach füllend gezogen und dann diese Höhe festgesetzt? Hättest auch selbst einfach die Pixel angeben können.

Urlaub · 14. Mai 2020

Das Problem ist, dass ich nicht weiß wie ich bei Wordpress in den kompletten Seitencode komme. Bei dem Plugin kann man über verschiedene Regler Objekte größer und kleiner machen etc.

Die Buchungsmaschine wird auf dem Handy leider auch noch nicht richtig angezeigt.

Ich muss dem iframe der Buchungsmaschine noch einen Namen geben und das target (?) im Code angeben. Dadurch bekomme ich dann noch eine Quicksearch-Leiste für die Startseite, die ich einbauen kann.

Das ist der Code den ich bekommen habe:

Ich habe das noch an die Hand gelegt bekommen, aber weiß noch nicht was ich davon gebrauchen kann und wie ich das ganze einsetze.

http://davidjbradshaw.github.io/iframe-resizer/

nextuser · 14. Mai 2020

Soweit ich weis sind "height"-Angaben im iframe selbst nur als CSS-Pixel erlaubt.

Und den resizer finde ich echt übertrieben. Alle 32ms anpassen ist echt blödsinn, als würde sich die Anzeige ständig von den Abmessungen ändern.

Dein eigentliches Problem ist ja Cross-Domain.

Bei "lokalen" iFrames könnte man bequem sowas wie

Code

document.getElementByID("iframeID").contentWindow.document.body.offsetHeight()

zur ermittlung der richtigen Höhe nutzen. Bei fremden Domains ist das nicht so einfach möglich.

Eine andere Möglichkeit wäre z.B. das.

Urlaub · 15. Mai 2020

Ich habe nach wie vor das Problem, dass sich die Seite nicht automatisch verlängert wenn die Suchergebnisse angezeigt werden.

Vielleicht kann mir jemand sagen was ich ändern muss.

Hier der Code:

/* Iframe */

.hentry iframe{

max-width:100%;

min-width:1250px;

min-height:2636px;

max-height:100%;

box-sizing:content-box;

}

/* Entry Content */

#main .hentry .entry-content{

min-width:100%;

padding-left:0px;

padding-right:0px;

margin-left:0px;

max-width:100%;

min-height:100%;

}

/* Article */

#main article{

min-height:100%;

}

/* 1600px and below screen sizes */

@media (max-width:1600px){

/* Iframe */

.hentry iframe{

min-width:0px;

max-width:100%;

max-height:100%;

min-height:16475px;

}

/* Image */

.site-branding .custom-logo-link img{

min-width:263px;

}

/* Link */

#primary-menu .menu-item a{

font-size:15px;

}

/* Menu */

#primary-menu{

position:relative;

}

/* 1000px and below screen sizes */

@media (max-width:1000px){

/* Iframe */

.hentry iframe{

max-width:100%;

min-width:980px;

}

/* Image */

.site-branding .custom-logo-link img{

min-width:271px;

}

/* Link */

#primary-menu .menu-item a{

font-size:15px;

}

/* 992px and below screen sizes */

@media (max-width:992px){

/* Iframe */

.hentry iframe{

min-width:0px;

max-width:100%;

}

/* Menu */

#primary-menu{

position:relative;

left:95px;

font-size:12px;

}

/* Link */

#primary-menu .menu-item a{

font-size:15px;

}

/* Image */

.site-branding .custom-logo-link img{

min-width:263px;

}

/* 800px and below screen sizes */

@media (max-width:800px){

/* Iframe */

.hentry iframe{

max-width:100%;

}

/* 599px and below screen sizes */

@media (max-width:599px){

/* Iframe */

.hentry iframe{

max-width:100%;

}

/* 480px and below screen sizes */

@media (max-width:480px){

/* Iframe */

.hentry iframe{

max-width:100%;

}

/* 320px and below screen sizes */

@media (max-width:320px){

/* Iframe */

.hentry iframe{

max-width:100%;

}

/* Image */

.site-branding .custom-logo-link img{

min-width:0px;

left:-43px;

top:-2px;

}

basti1012 · 15. Mai 2020

Zitat von Urlaub

Ich habe nach wie vor das Problem, dass sich die Seite nicht automatisch verlängert wenn die Suchergebnisse angezeigt werden.

Vielleicht kann mir jemand sagen was ich ändern muss.

Wenn ich das richtig verstanden habe ist das eine Fremdseite und das läßt sich nicht so einfach anpassen wegen dem den cross-domain kram.

Wenn das auf deiner Domain wäre könnte man den Iframe anpassen .

zb so irgendwie

Code

<script>
   function resizeIFrameToFitContent( iFrame ) {
      iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
      iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
      ende=iFrame.height+'px';
      var iFrame = document.getElementById( 'iFrame1' );
      iFrame.style.height=ende;
   } 
</script>
<iframe  id="iFrame1" style="width:calc(100vw - 20px);border:none;overflow:auto" onload="resizeIFrameToFitContent(this)" src="dein_link_der_auf_deine_domain_liegt.html"></iframe>

Da das aber nicht der fall ist mußt du den kram umgehen.

Zb du holst du die Seite mit php und dann...

Oder man sendet falsche header...

Urlaub · 15. Mai 2020

Kann man damit diesbezüglich was anfangen?

1. Erstellen eines iFrames mit einem Link zur Evolution IBE

2. Einbinden einer JS-Datei im Header: https://ibe.traffics.de/******…m/js/iframeResizer.min.js (**************** steht für die 16-

stellige CFG des Kunden)

3. Einbinden von JS-Code für das korrekte Scrollen innerhalb der IBE

iFrame Resizer Beispiel Script

<?php

/**

* Bitte tragen sie hier Ihre traffics-CFG ein

*/

$cfg = '****************';

$domain = 'https://ibe.traffics.de/'.$cfg;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>iFrame Resizer Test-Tool für die Evolution IBE</title>

<!--

als iFrame Resizer setzen wir dieses Tool ein:

http://davidjbradshaw.github.io/iframe-resizer/

-->

/script>

<!--

Diese Zeile wird benötigt, wenn die responsive IBE in einem Iframe geladen wird:

-->

</head>

<body>

Dokumentation für den Kunden

<h1>iFrame Resizer Test-Tool für die Evolution IBE</h1>

<h4>Todos für die Einbindung:</h4>

<ul>

<li>

CFG konfigurieren

</li>

<li>

Include der Datei iframeResizer.min.js im Head-Bereich der (Kunden-)Seite. Diese Datei stellen

wir über die IBE Server zur Verfügung!

</li>

<li>

Anpassung der URL im src-Attribut des IFrame-Tags

-> nutzen der Variable $cfg in dieser Datei oder

-> src="https://ibe.traffics.de/CFG"

</li>

<li>

Konfiguration des Iframe-Resizing Tools - Erklärung der Parameter <a target="_blank" href="

http://davidjbradshaw.github.io/iframe-resizer/">hier</a>

</li>

</ul>

/iframe>

// Höhe oberhalb des Frames ermitteln

var evolutionIbeOffset = document.getElementById('evolutionIBE').offsetTop;

// initialisiere die Kommunikation zwischen Seite und iFrame

iFrameResize({

checkOrigin : false,

// Funktion für die Kommunikation zwischen Frame und Seite zum Positionieren

bestimmter Elemente

messageCallback: function (obj) {

// Position innerhalb der IBE wird ausgelesen

var height = obj.message.scrollToPos;

if (evolutionIbeOffset) {

height += evolutionIbeOffset;

}

// Korrekturen

if ((obj.message.action === 'closeFrame') && (height > 50)) {

height -= 50;

}

// springe mit dem iFrame an die entsprechende Stelle

window.scrollTo(0, height);

}

});

</script>

</body>

</html>

IBE einfügen Wordpress via iframe

Jetzt mitmachen!

Teilen