Verwendung von Javascript (<script> und onload) mit Ajax Calls

Ich schrieb eine vorherige Frage ... was ziemlich verwirrend war ... so habe ich es so einfach wie möglich für alle verständlich gemacht.Verwendung von Javascript (<script> und onload) mit Ajax Calls

Ich verwende den PHP integrierten Webserver, um meinen PHP-Code zu testen. Ich weiß nicht, ob es irgendwelche Nachteile gibt, aber das ist es, was ich gerade benutze (Ratschläge wären hilfreich in diesem Zusammenhang, da ich offensichtlich nicht weiß, was ich tue, aber ich denke nicht es betrifft das Problem)

Ich versuche, den untenstehenden Code und speziell leggo() auszuführen. Alle Skripte in page2.php funktionieren nicht und Onloads funktionieren definitiv nicht (aus offensichtlichen Gründen). Diese Skripts funktionieren nicht, aber wenn alle Skripte in header.php verschoben werden, beginnen sie zu arbeiten ... außer Onload. Gibt es eine Alternative zur Verwendung onload. Ich schätze, es gibt ein Problem mit der Verwendung von AJAX und onload in Verbindung. --- EDIT --- Code wurde zum besseren Verständnis und Vorschlag vereinfacht.

-Code

heading.php

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
      function loadPageBelow(fileName) { 
       var xhttp = new XMLHttpRequest(); 
       xhttp.onreadystatechange = function() { 
        document.getElementById("content").innerHTML = xhttp.responseText; 
       }; 
       xhttp.open("GET", fileName, true); 
       xhttp.send(); 
      } 
     </script> 
    </head> 
    <body> 
     <p><b>THIS IS THE HEADER</b></p> 
     <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a> 
     <div id="content"> 
      <?php 
       include("starter.html"); 
      ?> 
     </div> 
    </body> 
</html>

starter.html

<p>Welcome to the homepage</p>

page2.php

<canvas id="canvas" width="200px" height="200px">HI</canvas> 
<script type="text/javascript" src="script.js"></script> 
<script> 
    leggo(); 
</script>

script.js

function leggo() 
{ 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.fillRect(0,0,100,100); 
}

Um Web-Server laufen, wie ich gehe mit den Programmen in den Ordner tue und php -S localhost:8000 in das Terminal eingeben. Dann gehen Sie den Browser und geben Sie http://localhost:8000/heading.php

--------------------------------------- BEARBEITEN ---------------------------------------

Ich machte den AJAX-Anruf verwenden jquery:

$(document).ready(function(){ 
      $("a").click(function() { 
       $("#content").load("page2.php"); 
      }); 
     });

Und jetzt bekomme ich den Fehler:

Synchron XMLHttpRequest auf dem Hauptthread wegen seiner schädlichen Auswirkungen veraltet ist auf die Erfahrung des Endbenutzers. Weitere Informationen finden Sie unter https://xhr.spec.whatwg.org/.

Das kann etwas anderes sein. Jede mögliche Hilfe würde sehr geschätzt werden

Quelle

2016-06-21 Jetstream5500

innerHTML- für das Hinzufügen von HTML auf der Seite verwendet wird, ist in Ordnung, aber wenn es JavaScript enthält, wird es nicht ausgeführt werden, oder zumindest Cross-Browser, wenn es funktioniert. jQuery verwendet einen Workaround dafür, der bei meinen Tests nicht wirklich versagt hat. Probieren Sie es selbst aus: '$ ('body'). Append ('');' – Ultimater

Wohin würde diese Zeile im Code gehen? Ich bin ziemlich neu in all dem Zeug. Warum sollte das Aufrufen des Skripts von jQuery anders sein als das Aufrufen von js mit js? - @Ultimater – Jetstream5500

jQuery filtert zuerst den HTML-Code, entfernt JavaScript, speichert es dabei, bevor es den HTML-Code an die Seite anfügt, und bewertet dann das entfernte Javascript. Was auch immer Workaround in jQuery geschrieben haben, ist mir noch nicht gelungen. – Ultimater

Ich bin nicht sicher, dass ich verstehe, warum Sie HTML-Seiten mit JavaScript einschließen möchten. Dies ist nicht sehr üblich und es gibt wahrscheinlich andere Möglichkeiten, dies zu tun. In jedem Fall, wenn Sie darauf bestehen, müssen Sie sicherstellen, dass Sie, insbesondere wenn Sie dies tun, kein vollständiges Dokument haben.So sollte starter.html aussehen wie folgt aus:

 <p>Welcome to the homepage</p>

Und page2.php sollte wie folgt aussehen:

<script> 
     function leggo() { 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      ctx.fillRect(0,0,100,100); 
     } 
    </script> 
    <canvas id="canvas" width="200px" height="200px">HI</canvas> 
    <script> 
     leggo(); 
    </script>

Dann sollten Sie einen Anruf an die leggo() an in xhttp.onreadystatechange von loadPageBelow wie folgt hinzu:

<html> 
    <head> 
     <script> 
      function loadPageBelow(fileName) { 
       var xhttp = new XMLHttpRequest(); 
       xhttp.onreadystatechange = function() { 
        document.getElementById("content").innerHTML = xhttp.responseText; 
       }; 
       xhttp.open("GET", fileName, true); 
       xhttp.send(); 
      } 
     </script> 
    </head> 
    <body> 
     <p><b>THIS IS THE HEADER</b></p> 
     <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a> 
     <div id="content"> 
      <?php 
       include("starter.html"); 
      ?> 
     </div> 
    </body> 
</html>

Quelle

2016-06-21 04:05:28

Diese Dateien werden in die Dateien eingefügt, die ich habe, und ich bekomme immer noch einen Fehler "Kann Variable nicht finden: leggo" - @NicolasBouvrette – Jetstream5500

@ Jetstream5500 Sie haben Recht, Rückruf würde nicht funktionieren, da die Funktion nicht existiert. Ich habe mit einer anderen Lösung aktualisiert, die keinen Rückruf erfordert. –

Scheint immer noch nicht zu funktionieren. Ich bearbeite die Frage mit dem, was ich jetzt habe, also sind alle auf der gleichen Seite. Wenn es eine andere Möglichkeit gibt, den Ajax zu machen, die auch hilfreich sein könnte? Little verloren, wie es scheint, eine einfache Aufgabe - @NicolasBouvrette – Jetstream5500

Da Sie gerade Inhalt in die innerHTML eines div laden, wo der Körper bereits geladen wurde, sollten Sie die Tags und aus starter.hml und page2.php entfernen. Außerdem sollte Ihr Skript unter Ihrem gesamten HTML-Markup stehen. Nachdem Sie dies getan haben, fügen Sie einfach Ihre Leggo() -Funktion hinzu und fügen Sie einen Dokument-Ready-Check hinzu.

Beispiel

<script> 

function leggo() { 
       var ctx = document.getElementById('canvas').getContext('2d'); 
       ctx.fillRect(0,0,100,100); 
    } 

if(document.readyState == "complete"){ 

leggo() 


} 
</script>

Quelle

2016-06-21 04:13:19 KpTheConstructor

Ich habe diese 'if-Anweisung' in der JS-Datei und es immer noch funktioniert nicht (eingefügt). Ich gehe davon aus, dass das der gleiche Effekt sein würde, wie es in dem Tag zu haben, also..keine gehen? - @KpTheConstructor – Jetstream5500

Ich werde auf ein Glied und übernehmen Sie Ihre HTML nicht analysiert wird und die leggo() Funktion für die Leinwand mit der ID der Leinwand sucht. Dieses Element ist noch nicht geschrieben, da die Seite die Antwort interpretiert.

Ich werde nicht Ihre Codes kritisieren. Ich würde vorschlagen, dass Sie das Skript verschieben, bis die Seite im Webbrowser geladen wird. Um dies zu tun, trennen Sie Ihre leggo()-Funktion von HTML und in externe JavaScript-Datei und aktualisieren Sie dann das HTML <script>-Tag mit den Attributen defer und src.

Wenn externes Skript nicht möglich ist, würde ich empfehlen, jQuery onload-Funktion einzuschließen, um festzustellen, ob Inhalte geladen wurden.

Wenn jQuery nicht möglich ist, würde ich vorschlagen, diese thread zu folgen, um festzustellen, ob Inhalte geladen werden, ohne jQuery zu verwenden.

Vorgeschlagene Alternative: heading.php

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function loadPageBelow(fileName) { 
      this.document.location = "http://localhost/heading.php?page="+fileName; 
     } 
    </script> 
</head> 
<body> 
    <p><b>THIS IS THE HEADER</b></p> 
    <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a> 
    <div id="content"> 
     <?php 
      if(isset($_GET['page'])) { 
       include($_GET['page']); 
      } else { 
       include("starter.html"); 
      } 
     ?> 
    </div> 
</body> 
</html>

Quelle

2016-06-21 04:13:21

Verwendung von Javascript (<script> und onload) mit Ajax Calls

Antwort

Verwandte Themen