Javascript geht nicht in einem von XMLHttpRequest geladenen Div?
Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:
<script language="javascript" type="text/javascript">
function getData() {
var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object
xhr.onload = function() { // When response has loaded
// The following conditional check will not work locally - only on a server
if(xhr.status === 200) { // If server status was ok
document.getElementById('load').innerHTML = xhr.responseText; // Update
}
};
xhr.open('GET', 'sql/load.php', true); // Prepare the request
xhr.send(); // Send the request
}
setInterval(getData, 1000);
</script>
<div id='load'></div>
Hier meine Load.php
<?php
session_start();
require_once "config.php";
require_once "link_user.php";
//Check new messages
$test = "false";
$sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
$query = mysqli_query($db_link, $sql) or die (mysqli_error());
$num = mysqli_num_rows($query);
while ($row = mysqli_fetch_array($query)) {
$chat_id = $row["chat_id"];
}
if($num == 1){
echo "<script>
var notification = new Notification('Notification title', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: 'Hey there! You\'ve been notified!',
});</script>
";
}
?>
2 Antworten
Der Browser evaluiert ein Skript, welches via innerHTML eingefügt wird, nicht dynamisch. Füge es stattdessen via appendChild zum Dokument hinzu.
const scriptElement = document.createElement("script");
const scriptText = document.createTextNode(/* your script */);
scriptElement.appendChild(scriptText);
document.getElementById("load").appendChild(scriptElement);
In deinem PHP-Skript lässt du wiederum die script-Tags weg.
Eleganter wäre es im Übrigen, mit PHP nur die Daten (in JSON-Form) an den Browser zu liefern, sodass JavaScript und PHP möglichst voneinander getrennt bleiben.
{
"title": "Notification title",
"options": {
"icon": "http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png",
"body": "Hey there! You\'ve been notified!",
}
}
Der konkrete JavaScript-Code wiederum steht im Callback des Requests.
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
const notification = new Notification(data.title, data.options);
}
Also Grundvoraussetzung ist schon, dass du sowohl JavaScript als auch dein eigenes Skript verstehst.
Die erste vorgestellte Lösung zeigt, wie du mit JavaScript das Script laden kannst, welches du dynamisch in deine Webseite einfügen möchtest. Statt es via innerHTML einzufügen, muss ein script-Element kreiert und dann an das Zielelement gehängt werden. Dann evaluiert dein Browser das Skript auch.
Die zweite Lösung zeigt, wie es besser geht. Mit deinem PHP-Skript gibst du nur die relevanten Daten zurück, statt einen JavaScript. Der steht stattdessen im onload-Callback. Die Daten vom PHP-Response werden als JSON-Objekt geparst und dann weitergegeben.
Wahrscheinlich aus Sicherheitsgründen: https://de.wikipedia.org/wiki/Same-Origin-Policy
Probier's mal mit createElement() statt innerHTML. innerHTML checkt nicht, dass da ein Script drin ist:
https://stackoverflow.com/questions/13390588/script-tag-create-with-innerhtml-of-a-div-doesnt-work
Dein div "load" nicht per innerHTML befüllen, sondern ein script-Tag appenden (mit src, dann kannst du dir sogar den XmlHttpRequest sparen).
Etwa sowas:
var script = document.createElement('script');
script.src = 'sql/load.php';
scrip.type = 'text/javascript';
document.getElementById('load').appendChild(script);
Jetzt kann das php nicht geladen werden deshalb geht jetzt gar nix mehr
Öhm okay ich zwar kein plan wie ich das jetzt nutzen soll aber okay ich teste mal