JS: Externe Seite in Seite laden

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Freitag, 19. Oktober 2018 um 14:20 Uhr (42/2018 Kalenderwoche)

geändert: Freitag, 11. August 2023 um 10:21 Uhr (32/2023 Kalenderwoche)

Keywords: ajax load jquery Zeitverzögert inkludieren include

Kategorien: Browser, HTML, JavaScript,

Text:

Mit folgendem Skript kann man eine externe Seite in die eigene Seite einmalig oder immer wieder nachladen.


Im Beispiel wird die Datenbank-Meldung immer wieder eingeblendet. Das PHP-Script läuft im Hintergrund ab und schreibt ständig in eine Ascii-Datei, die per JS immer wieder ausgelesen und in die HTML-Seite eingebettet wird.


Kleine Ajax-Einführung und weitere Links:
https://www.html-seminar.de/ajax-einfuehrung.htm
https://www.w3schools.com/js/jsajaxexamples.asp
https://wiki.selfhtml.org/wiki/JavaScript/Ajax


s. a. TechDox-306: JS: HTTP Request mit Javascript

Quellcode:   

<div id="platzhalter4Js" style="width:40em; padding:1em; border: 4px outset #007342;">
    <div style=" background-color:#DDD;">
        <h2>Der Löschvorgang wurde gestartet...</h2>
        <strong>Der Vorgang kann einige Sekunden in Anspruch nehmen.</strong>
    </div>
</div>

<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    var ladeNeu;
    function zeigeDbErgebnis() {
        $(document).ready(function(x) {
            $.ajax({url: "https://techdox.website-vdm.de/index.php?id=226",
                success: function(result){
                    $("#platzhalter4Js").html(result);
            }});
        });
        //jetzt einfach immer wieder aufrufen (alle 2 Sek.)
        ladeNeu = window.setTimeout("zeigeDbErgebnis()", 2000);
    }//ENDE: function zeigeDbErgebnis()
    //Nach 3 Sekunden die Datei das erste Mal reinziehen, wenn vorhanden
    ladeNeu = window.setTimeout("zeigeDbErgebnis()", 3000);
</script>


Wenn obriges eine Fehlermeldung zeigt, dann vielleicht "jQuery" statt "$":
<script type="text/javascript">
    var ladeNeu;
    function zeigeDbErgebnis() {
        jQuery(document).ready(function(x) {
            jQuery.ajax({url: "https://techdox.website-vdm.de/index.php?id=226",
                success: function(result){
                    jQuery("#platzhalter4Js").html(result);
            }});
        });
        //jetzt einfach immer wieder aufrufen (alle 2 Sek.)
        ladeNeu = window.setTimeout("zeigeDbErgebnis()", 2000);
    }//ENDE: function zeigeDbErgebnis()
    //Nach 3 Sekunden die Datei das erste Mal reinziehen, wenn vorhanden
    ladeNeu = window.setTimeout("zeigeDbErgebnis()", 3000);
</script>