it-swarm.com.de

Wie aktualisiere ich einen Browser programmgesteuert?

Ich habe drei Computer. Server, Client und Viewer. Ich habe die Kontrolle über den Server und den Viewer .workflow

  1. Der Benutzer der Client stellt eine Verbindung zur Server her und erhält eine Webseite.
  2. Über ein PHP-Skript lädt der Benutzer ein Bild hoch.
  3. Das Bild ist in etwas HTML eingebettet.
  4. Die Viewer ist ein Computer ohne Benutzerinteraktion - es gibt keine Tastatur. Die Variable Viewer führt immer einen Webbrowser aus und zeigt die Bildseite an.

Mein Problem ist jetzt, dass die Webseite nicht aktualisiert wird, obwohl sich das Bild auf der Serverfestplatte ändert. Wie aktualisiere ich den Webbrowser im Viewer oder in einem Teil der Webseite?

Ich kenne HTML, CSS, Javascript, PHP und Ajax, aber anscheinend nicht gut genug.

29
hpekristiansen

Es gibt mindestens drei Möglichkeiten, dies zu erreichen.

Pure HTML

Wie aus dem Kommentar von Amitd hervorgeht, fügen Sie in "show.html" den folgenden <meta>-Tag zum <head>-Element Ihres Dokuments hinzu:

<meta http-equiv="refresh" content="5" />

Dadurch wird die Seite automatisch alle 5 Sekunden aktualisiert. Passen Sie den Wert des Attributs content an die gewünschte Anzahl von Sekunden an.

Reines JavaScript:

Wie von MeNoMore ausgeführt, aktualisiert document.location.reload() die Seite, wenn Sie sie aufrufen.

<script type="text/javascript">
    //put this somewhere in "show.html"
    //using window onload event to run function
    //so function runs after all content has been loaded.
    //After refresh this entire script will run again.
    window.onload = function () {
        'use strict';
        var millisecondsBeforeRefresh = 5000; //Adjust time here
        window.setTimeout(function () {
            //refresh the entire document
            document.location.reload();
        }, millisecondsBeforeRefresh);
    };
</script>

Und wie von tpower AJAX ausgeführt, können Anforderungen verwendet werden, aber Sie müssen einen Webdienst schreiben, um eine URL zum gewünschten Bild zurückzugeben. Das JavaScript für eine AJAX -Anfrage würde ungefähr so ​​aussehen:

<script type="text/javascript">
    //put this somewhere in "show.html"
    //using window onload event to run function
    //so function runs after all content has been loaded.
    window.onload = function () {
        'use strict';
        var xhr,
            millisecondsBeforeNewImg = 5000;    // Adjust time here
        if (window.XMLHttpRequest) {
            // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // IE
            try {
                // try the newer ActiveXObject
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    // newer failed, try the older one
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    // log error to browser console
                    console.log(e);
                }
            }
        }
        if (!xhr) {
            // log error to browser console
            console.log('Giving up :( Cannot create an XMLHTTP instance');
        }
        xhr.onreadystatechange = function () {
            var img;
            // process the server response
            if (xhr.readyState === 4) {
                // everything is good, the response is received
                if (xhr.status === 200) {
                    // perfect!
                    // assuming the responseText contains the new url to the image...
                    // get the img
                    img = document.getElementById('theImgId');
                    //set the new src
                    img.src = xhr.responseText;
                } else {
                    // there was a problem with the request,
                    // for example the response may contain a 404 (Not Found)
                    // or 500 (Internal Server Error) response code
                    console.log(xhr.status);
                }
            } else {
                // still not ready
                // could do something here, but it's not necessary
                // included strictly for example purposes
            }
        };
        // Using setInterval to run every X milliseconds
        window.setInterval(function () {
            xhr.open('GET', 'http://www.myDomain.com/someServiceToReturnURLtoDesiredImage', true);
            xhr.send(null);
        }, millisecondsBeforeNewImg)
    };
</script>

Andere Methoden:

Um Ihre Frage auf die Antwort von tpower zu beantworten, verwendet $.ajax()jQuery , um den Aufruf von AJAX auszuführen. jQuery ist eine JavaScript-Bibliothek, die AJAX -Aufrufe und die DOM-Manipulation wesentlich vereinfacht. Um die jQuery-Bibliothek verwenden zu können, müssen Sie einen Verweis darauf in Ihr <head>-Element einfügen (Version 1.4.2 wird als Beispiel verwendet):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Sie können auch "jquery.min.js" herunterladen und lokal hosten, dies würde jedoch natürlich nur die URL ändern, aus der Sie das Skript geladen haben.

Die Funktion AJAX oben würde, wenn sie mit jQuery geschrieben wurde, eher wie folgt aussehen:

<script type="text/javascript">
    //put this somewhere in "show.html"
    //document.ready takes the place of window.onload
    $(document).ready(function () {
        'use strict';
        var millisecondsBeforeNewImg = 5000;    // Adjust time here
        window.setInterval(function () {
            $.ajax({
                "url": "http://www.myDomain.com/someServiceToReturnURLtoDesiredImage",
                "error": function (jqXHR, textStatus, errorThrown) {
                    // log error to browser console
                    console.log(textStatus + ': ' + errorThrown);
                },
                "success": function (data, textStatus, jqXHR) {
                    //get the img and assign the new src
                    $('#theImgId').attr('src', data);
                }
            });
        }, millisecondsBeforeNewImg);
    });
</script>

Wie ich hoffe, ist die jQuery-Version viel einfacher und sauberer. Angesichts des geringen Umfangs Ihres Projekts weiß ich jedoch nicht, ob Sie sich mit dem zusätzlichen Aufwand von jQuery beschäftigen möchten (nicht dass es so viel ist). Ich weiß auch nicht, ob Ihre Projektanforderungen die Möglichkeit von jQuery zulassen. Ich habe dieses Beispiel nur hinzugefügt, um Ihre Frage zu beantworten, was $.ajax() war.

Ich bin ebenso sicher, dass es andere Methoden gibt, mit denen Sie das Bild aktualisieren können. Wenn sich die Bild-URL immer ändert, würde ich persönlich die Route AJAX verwenden. Wenn die Bild-URL statisch ist, würde ich wahrscheinlich das <meta>-Refresh-Tag verwenden.

46
pete

Ich habe genau die gleiche Anwendung. Verwenden Sie einfach WebSockets.

Sie können einen websocket connection starten und der Server informiert die Viewer, wenn ein Update erhalten wird. Sie können das aktualisierte Image vollständig asynchron über Websocket senden, ohne die Anzeige oder die Benutzerinteraktion zu beeinträchtigen.

Wenn Sie Timer verwenden, erhalten Sie keine schnellen Aktualisierungen oder aktualisieren die Seite ohne Verwendung.


Einzelheiten:

Benötigt einen Websocket-Server wie pywebsocket oder phpwebsocket.

Klient:

Benötigt HTML5-Websocket-Unterstützung. Alle aktuellen Browser unterstützen dies.

Sie müssen sich für eine Nachricht registrieren, wenn ein Image-Update durchgeführt wird. Es ist wie ein Callback zu registrieren.

Beispiel:

wSocket = new WebSocket('ws://' + serverIP + ':' + serverPort + '/images');

wSocket.onopen = function() {
    console.log("Primary Socket Connected.");

    connectedPrimary = true;

    wSocket.send("sendImageUpdates");
};

wSocket.onmessage = function(evt) {
    // evt is the message from server

    // image will be representated as a 64 encoded string

    // change image with new one
    $("#image").attr('src', 'data:image/png;base64,' + evt.data);
}

wSocket.onclose = function() {
    console.log("Primary Socket Closed.");

    wSocket = null;
};

wSocket.onerror = function(evt) {
    alert(evt);
}

Wenn der Server ein Update sendet, wird die auf wSocket.onmessage zugeordnete Funktion aufgerufen, und Sie können alles tun, was Sie damit tun möchten.

Server:

Wartet auf eine Verbindung vom Client (kann zur Unterstützung mehrerer Clients hergestellt werden). Sobald eine Verbindung hergestellt wurde und die Nachricht "sendImageUpdates" empfangen wurde, wartet der Server auf Aktualisierungen im Image. Wenn ein neues Bild hochgeladen wird, erstellt der Server eine neue Nachricht und sendet sie an den Client.

Pros

  1. Wird aktualisiert, sobald ein Bild hochgeladen wird, und nur dann, wenn ein Bild hochgeladen wird.
  2. Der Client weiß, dass sich das Image geändert hat, und kann zusätzliche Funktionen ausführen.
  3. Vollständig asynchron und servergesteuert.
19
ATOzTOA

Sie können mit Hilfe von AJAX -Anfragen helfen. Zum Beispiel fragen Sie den Server alle fünf Sekunden nach dem Image. Stattdessen können Sie den Server nach einer neuen Image-ID abfragen und diese ID anstelle der Zufallszahl für die Quelle des Images verwenden. In diesem Fall wird das src-Attribut nur geändert/neu geladen, wenn ein neues Bild vorhanden ist.

<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   $.ajax({
      url: 'latest-image-id.json',
      success: function(newId){
          document.images['doc'].src = 'doc.png?' + newId;        
      }
   });
   setTimeout(refreshIt, 5000); // refresh every 5 secs
}
//--></script>
</head>
<body onLoad=" setTimeout(refreshIt, 5000)">
<img src="doc.png" name="doc">

Eine Alternative besteht darin, eine Benachrichtigung vom Server zu erhalten, wenn sich das Bild über einen Web-Socket ändert.

11
tpower

Das erneute Laden der Seite in einem bestimmten Zeitintervall kann den Trick erfüllen.

setTimeout(function(){
window.location.reload(1);
}, 5000);

Der obige Code lädt die aktuelle Seite in 5 Sekunden neu.

OR

Sie können sich auch für einen Ajax-Aufruf entscheiden, der asynchron ist, und Sie müssen nicht die gesamte Seite aktualisieren. Überprüfen Sie den folgenden Code:

$.ajax({
  url: "test.aspx",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

Dies kann vor Ort der window.location.reload(1); verwendet werden.

[** test.html: ** Diese Seite muss alle Image src beim Laden enthalten, dh einen Dienst, der die Bilder auf die Seite bringt.]

Auf diese Weise erhalten Sie das Ergebnis als data in der done(function(), das Sie einem HTML-Element auf der aktuellen Seite zuordnen können. Beispiel:

done(function() {
$('#ImageId').attr('src', data);
 });

Dadurch wird der src des img-Tags von test.aspx auf data gesetzt

Advantage: Die gesamte Seite wird nicht aktualisiert und es wird nur das neue Bild hinzugefügt.

Gehen Sie gründlich auf diesen link um mehr über jQuery Ajax zu erfahren ...

5
A J

Benutzen.

document.location.reload();

Um beispielsweise auf eine Schaltfläche zu reagieren, klicken Sie auf:

<input type="button" value="Reload Page" onClick="window.location.reload()">
3
CloudyMarble

Am einfachsten ist es, AJAX Pooling zu verwenden.
Wenn Sie in der PHP-Datei den Upload übergeben, speichern Sie beim Hochladen eines neuen Fotos einen Unix-Zeitstempel in einer Datei:

file_put_contents('lastupload.txt', strval(time())); // Save timestamp of upload

Erstellen Sie eine weitere PHP-Datei (ex: polling.php), die Aufrufe von AJAX verarbeitet, und geben Sie den Unix-Zeitstempel des letzten Uploads zurück:

echo file_get_contents('lastupload.txt'); // Send last upload timestamp

Im Viewer-Javascript-Code führen Sie eine AJAX - Abfrage durch, die eine Änderung des Zeitstempels erkennt und das Bild bei Bedarf aktualisiert:

$(function() {
   setInterval(polling, 1000); // Call polling every second.
});
var lastupload = 0;
function polling() {
   $.ajax({
      url: 'polling.php',
      success: function(timestamp){
          if (timestamp > lastupload) { // Is timestamp newer?
              document.images['image'].src = 'image.png?' + timestamp; // Refresh image
              lastupload = timestamp;
          }
      }
   });
}

Ich habe den Code nicht getestet, daher kann es Fehler geben, aber dies ist die Idee.

1
qwertzguy

Sie müssen eine Client-Long-Polling-Verbindung mit dem Server (COMET) implementieren oder Socket verwenden, wenn Ihr Browser Websocket unterstützt.

1
Yuriy Bilogub

In Javascript gibt es einige Möglichkeiten, programmgesteuert zu aktualisieren.

Die bevorzugte Methode ist location.reload()

Eine andere Möglichkeit besteht darin, die location.href-Eigenschaft festzulegen. Der Browser wechselt automatisch zur neuen URL. location=location oder location.href=location.href würden dies ebenfalls tun.

Obwohl die zweite Methode wahrscheinlich komisch aussieht.

Um es zusammenzufassen:

location.reload();
//or
location.href=location.href;
//or
location=location;


Ich hoffe das hat geholfen.

1
Braden Best

Ich denke nicht, dass Sie dafür viel Scripting brauchen. Ich habe dieses Problem gelöst, indem ich direkt nach der Bild-URL ein Fragezeichen und eine Zufallszahl hinzufügte. Wenn Sie die Bild-URL nicht ändern, ruft der Browser sie aus dem Cache auf.

So zeigen Sie das neueste Bild auf der Seite an:

<img src="<?php echo $image_url; ?>?<?php echo Rand(10,99); ?>"/>

Es druckt etwas wie:

http://static.example.com/myimage.jpg?56 

Ihre Frage und meine Lösung erfrischt die Bild-URL, indem Sie sie mit Jquery und Javascript-Zufallszahlenfunktion in meinem Problem ändern. Ich denke, Sie haben den Punkt verstanden und würden ihn an Ihre Bedürfnisse anpassen.

$('#crop_image').live('click',function(){
    $(this).html(ajax_load_fb);
    var x = $('#x').val();
    var y = $('#y').val();
    var w = $('#w').val();
    var h = $('#h').val();
    var dataString = 'process=image_crop&x='+x+'&y='+y+'&w='+w+'&h='+h;
    $.ajax({
        type: 'POST',
        url: '<?php echo $siteMain;?>ajax/ajaxupload.php',
        data: dataString,
        cache: false,
        success: function(msg) {
            $('#crop_image').html('Crop Selection');
            $('.crop_success_msg').slideDown('slow');
            var numRand = Math.floor(Math.random()*101);
            $('#current_img').html('<img src="/images/large_<?php echo $user['username'];?>.jpg?'+numRand+'"/>');
        },
        error: function(response, status, error)
        { 
            $(this).html('Try Again');
        }
    });
});
1
Kemal

Die beste Lösung wäre, ein kleines PHP-Skript im Viewer-Webbrowser zu schreiben, um das Bild regelmäßig zu überprüfen. Wenn es geändert wird, wird es erneut geladen. Wenn der PHP-Code auf dem Server ausgeführt wird, können Sie dies problemlos tun Ich hoffe, das hilft, wenn Sie Code-Snippet benötigen, lassen Sie es mich wissen.

0
sumeet kumar