IBE einfügen Wordpress via iframe

  • 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:

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


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


    Hoffe jemand kann mir weiter helfen.

  • 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.

  • 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

  • Vielen Dank, es ist jetzt schon mal größer.:thumbup: 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. :D

  • 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...

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

    Das sind die einzigen Codes die ich bearbeiten kann:


    <!-- wp:html -->

    <iframe src="https://ibe.traffics.de/1100001280000000/pauschalreise/regionen?minCategory=3&amp;sortBy=quality&amp;sortDir=up&amp;searchDate=200520,030620,7&amp;adults=2&amp;minBoardType=OV/" style="border: 0" width="100%" height="800" frameborder="0" scrolling="yes">></iframe>

    <!-- /wp:html -->


    <!-- wp:separator {"className":"is-style-wide"} -->

    <hr class="wp-block-separator is-style-wide"/>

    <!-- /wp:separator -->


    <!-- wp:paragraph {"align":"center"} -->

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

    <!-- /wp:paragraph -->


    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.

  • 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.

  • 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:

    <iframe src="https://ibe.traffics.de/cfg/<?php echo urldecode($_GET['target']); ?>" height="100%" width="100%"></iframe>


    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/

  • 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.

  • 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;

    }


    }

  • 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...

  • 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">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <head>

    <title>iFrame Resizer Test-Tool f&uuml;r die Evolution IBE</title>

    <!--

    als iFrame Resizer setzen wir dieses Tool ein:

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

    -->

    <script type="text/javascript" src="<?php echo $domain; ?>/static/custom/js/iframeResizer.min.js"><

    /script>

    <!--

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

    -->

    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />

    </head>

    <body>

    Dokumentation für den Kunden


    <h1>iFrame Resizer Test-Tool f&uuml;r die Evolution IBE</h1>

    <h4>Todos f&uuml;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 &uuml;ber die IBE Server zur Verf&uuml;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&auml;rung der Parameter <a target="_blank" href="

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

    </li>

    </ul>

    <iframe id="evolutionIBE" width="100%" style="border:0;" scrolling="no" src="<?php echo $domain; ?>"><

    /iframe>

    <script type="text/javascript">

    // 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>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!