iFrame per Java beim Aufruf der Domain laden bzw. Seite vorschalten

  • Hallo liebe Leute,


    ich bin nicht nur hier NEU sondern auch im Land von HTML, CSS und JAVA....

    Ich habe mich mit 46 nochmal entschieden etwas anständiges zu lernen und so habe ich im August eine Ausbildung zum Mediengestalter begonnen.
    Allerdings bin ich was das lernen angeht etwas - naja, ungeduldig :)

    Deswegen hoffe ich hier Unterstützung zu bekommen, ich suche hier nicht nach Endlösungen, ich möchte das ganze "Zeugs" verstehen.
    Das heißt vielleicht kann mir der eine oder andere eine gute Quelle für Newbies nennen.

    Jetzt gerade habe ich das Problem ich möchte eine externe Seite beim laden der Startseite anzeigen lassen.

    Die Seite soll immer nur 1x/Session angezeigt werden.


    Vor kurzem hatte ich einen kleinen Erfolg mit einem Modal (Störer) das ich per JS aufgerufen habe.

    Leider funktioniert das mit der Seite nicht.

    Hat jemand nen Tipp für mich?


    Besten Dank Vorab!

  • Moin, erstmal sollte dir bewusst sein, dass Java etwas anderes ist als JavaScript ... kannst du googlen ;)


    Nutzt du jQuery auf deiner Seite? Dann könntest du ein iframe z.b. so einbauen:


    Code
    $('<iframe width="560" height="315" src="https://www.youtube.com/embed/GzEFt3JG3xA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>')
         .prependTo('body');

    Du kannst das z.B. hier auf der Seite ausprobieren, gehe in die JS Console (F12 > Console) und gib das Script ein, dann erscheint oben auf der Seite das iframe.

  • Hallo Marwitt,


    vielen, vielen Dank. Nicht nur für die schnelle sondern auch hilfreiche Antwort.:thumbup:


    Und sorry, ich meinte natürlich JavaScript.! Da siehste mal wie verwirrend das noch alles für mich ist :D


    Ich habe das jetzt soweit eingebaut und es funktioniert.

    Allerdings nur solange ich im BE angemeldet bin.

    Wenn ich mich abmelde passiert NIX :/.


    Code: header,php
    <!-- ANFANG Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>  jQuery(document).ready(function() {
            /* Hier folgt jQuery-Code */
            jQuery('<iframe width="100%" height="1900" src="https://domain.de/" frameborder="0" </iframe>')
              .prependTo('body');
          });
        </script>
    <!-- ENDE Javascript -->


    Was ich auch versucht habe ist das Script als Datei auszulagern, habe das wie folgt probiert:


    Aufruf im head der header.php (Pfad: theme/header.php)

    PHP: header.php
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/onLoad.js"></script>
    
    <?php wp_head(); ?>

    Das Script selber, also die "onLoad.js" (Pfad: theme/js/onLoad.js)

    Code: onLoad.js
    jQuery(document).ready(function() {    
    /* Hier folgt jQuery-Code */    
    jQuery('<iframe width="100%" height="1900" src="https://domain.de/" frameborder="0" </iframe>')      
    .prependTo('body');  
    });

    Aber das wollte gar nicht!


    Vielleicht hast Du noch einen kleinen Gedankenanstoß für mich. :)

  • Hey,


    du willst in der Startseite eine weitere externe Seite anzeigen und diese soll nur 1mal pro Session verfügbar sein? Verstehe ich gerade nicht ganz.


    Willst du für jeden eine andere externe Seite anzeigen lassen?


    Zu deinem JQuery Code ist mir aufgefallen, dass der erste Iframe-Tag nicht geschlossen wird. Füge dort ein > nach frameborder="0" hinzu. Dann sollte es funktionieren.


    Freundliche Grüße,

    Stef

  • Hi Stef,


    nicht ganz. Es ist immer die gleiche Seite die geladen werden soll, allerdings nur auf der Startseite.

    Jetzt funktioniert es, die Seite wird aber auch bei allen Unzterseiten angezeigt,


    VG

    Terry

  • Zitat

    die Seite wird aber auch bei allen Unzterseiten angezeigt

    Wahrscheinlich bindest Du deine header.php auch auf den Unterseiten ein, dann wird auch dort das Skript ausgeführt und der iFrame angezeigt.

    BTW, dieser HTML-Text für den iFrame ist vollkommen statisch, es werden keine Variablen darin verwendet, und daher halte ich es für überflüssig, ihn mit Javascript anzuzeigen.

  • Einfach direkt im HTML notieren:

    Code
    <body>
        <iframe src="https://domain.de/seite.html">

    und dann die Sichtbarkeit mit Javascript steuern:

    Code
    document.querySelector('iframe').style.display='none'; // oder 'block'
  • Hey,


    du hast gerade das Problem, dass dir dieses Iframe auf jeder Seite angezeigt wird. Das bedeutet, wie Sempervivum geschrieben hat, dass diese Datei in der du dein Iframe einfügst in die Unterseiten eingebunden wird.


    Daher einfach unterhalb dieser Einbindung, wie Sempervivum in seinem neuen Post geschrieben hat, dein Iframe einbinden.


    Wenn du es unbedingt mit Javascript machen willst erstelle dir einfach eine neue JS-Datei, füge dort deinen Code ein und binde diesen in die Hauptseite ein.


    Grüße,

    Stef

  • Hallo,


    vielen Dank für die Hinweise!


    Klingt logisch, das wenn ich das im "header" einbaue, es auf allen Seiten gezeigt wird.

    Und es muss nicht unbedingt miut Javascript umgesetzt werden.


    Da ich das auf der Startseite aufrufen möchte müsste ich das ja in den "body" der "index.html" einfügen.

    Da es eine WP Installation ist (hätte ich vielleicht schon vorher erwähnen sollen) gibt es ja keine klassische "index.html".

    Kann ich das dann in die "index.php" schreiben?


    VG
    Terry

  • Hey Terry,


    mit Wordpress kenne ich mich nicht aus. Trotzdem gebe ich dir den Ratschlag: Teste es einfach aus. Es kann nichts schief gehen.


    Irgendwo wird ja die header.php in der Hauptseite (ich glaube es ist die index.php bei WP) eingebunden? Wenn du diese Stelle gefunden hast füge einfach untendran nochmal einen Header oder Div-Bereich mit HTML hinzu und füge dort dein iFrame ein.


    Freundliche Grüße,

    Stef

Jetzt mitmachen!

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