Chrome kann Web Worker nicht laden

Ich arbeite an einem Projekt, das einen Web-Worker verwendet.

In meinem Kopfbereich habe ich diesen Code:

var worker = new Worker("worker.js");
// More code

Dies funktioniert in Safari einwandfrei, Chrome meldet jedoch den folgenden Fehler:

Uncaught SecurityError: Failed to create a worker: script at '(path)/worker.js' cannot be accessed from origin 'null'.

Warum funktioniert das in Safari perfekt, aber nicht in Chrome? Wie behebe ich das?

Danke dir.

In Chrome können Sie keine Web-Worker laden, wenn Sie Skripts aus einer lokalen Datei ausführen.

Ich verwende eine Problemumgehung. Chrome blockiert Workeraber nicht <script>. Daher ist der beste Weg, eine universelle Lösung zu finden, folgender:

function worker_function() {
    // all code here
}
// This is in case of normal worker start
// "window" is not defined in web worker
// so if you load this file directly using `new Worker`
// the worker code will still execute properly
if(window!=self)
  worker_function();

Sie verknüpfen es dann wie gewohnt <script src="...". Und sobald die Funktion definiert ist, verwenden Sie diesen Gräuel eines Codes:

new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));

Das Problem wurde von Noble Chicken richtig erklärt, aber ich habe eine allgemeinere Lösung dafür. Anstatt wamp oder xamp zu installieren, können Sie mit Python zu dem Ordner navigieren, in dem Ihr Projekt gehostet wird, und Folgendes eingeben:python -m http.server

Genau das und Sie haben einen laufenden Server in diesem Ordner, der von localhost aus erreichbar ist.

Sie können beim Starten von Chrome auch das Flag --allow-file-access-from-files verwenden.

Beispiel für MacOsX:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

Weitere Informationen: Web Worker-Einstellungen für Chrome

Dies liegt an den Sicherheitsbeschränkungen. Sie müssen stattdessen http://oder https://protokollieren file:///.

Wenn Sie NodeJS installiert haben, können Sie einfach Folgendes tun. - Beachten Sie, dass dies eine von vielen verfügbaren Optionen ist

Installieren Sie den lokalen Webserver

$ npm install -g local-web-server

Jetzt können Sie es in jedem Ordner verwenden, über den Sie auf den Inhalt zugreifen möchten http.

$ ws

Navigieren Sie zu http://localhost:8000(Standardport: 8000)

Ich hatte das gleiche Problem wie Ihr Beitrag. Die Lösung ist, dass Sie es mit localhost (wamp oder xamp) ausführen müssen. Es wird getan.

Eine weitere Problemumgehung ist die Verwendung des Google- Webservers für die Chrome- Erweiterung. Wählen Sie Ihr Arbeitsverzeichnis und starten Sie den Server. Fertig!

Sie benötigen einen Webserver für die Anforderung vom HTTP-Protokoll anstelle der lokalen Datei und arbeiten ordnungsgemäß :)

ChromeLaden Sie die Datei, können Sie sie jedoch nicht ausführen. Verwenden Sie Firefox. Es funktioniert für mich.

Diese App bietet eine einfache Möglichkeit, einen lokalen http-Server in Chrome zu erstellen:

Webserver für Chrome

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related

Beschreibung:

Ein Webserver für Chrome stellt Webseiten aus einem lokalen Ordner über das Netzwerk mithilfe von HTTP bereit. Läuft offline. Web Server für Chrome ist ein Open Source (MIT) HTTP-Server für Chrome.

Es läuft überall dort, wo Sie Chrome installiert haben, sodass Sie es überall hin mitnehmen können. Es funktioniert sogar auf ARM-Chromebooks.

Es hat jetzt die Möglichkeit, das lokale Netzwerk abzuhören, damit andere Computer auf Ihre Dateien zugreifen können. Außerdem kann versucht werden, eine Internetadresse zu erhalten.

Viele Leute verwenden dies, um grundlegende Webentwicklungen auf einem Chromebook durchzuführen. Es ist auch praktisch, um Dateien über ein lokales Netzwerk zwischen Computern oder sogar im Internet auszutauschen.

Navigieren Sie nach der Installation zu http://127.0.0.1:8887

Und es ist nicht unsicher als Flag --allow-file-access-from-files

Dies ist inspiriert von Thomas Antwort oben. Aber mit einer Einschränkung, dass ich nur den HTML- Code verteilen wollte, habe ich die js manuell in dataURL konvertiert . und Aktivieren des Kontrollkästchens Daten-URL.

const myWorker = new Worker("data:application/x-javascript;base64,b25tZXNzYW...");

Da Python 2.x weiter verbreitet ist als Python 3.x, python -m SimpleHTTPServer 8000ist so etwas allgemeiner anwendbar, und zwar nicht nur für Mac OS X. Ich fand es beispielsweise für die Verwendung unter Cygwin erforderlich.

Damit funktionierte dieses Beispiel wie ein Champion.

function worker_fun(num){
    num ++
    // console.log(num)
    postMessage(num);
    setTimeout(worker_fun.bind(null,num), 500)
}

var w

function startWorker(){
    var blob = new Blob([
        "onmessage = function(e){\
            " + worker_fun.toString() + "\
            worker_fun(e.data.num);}"
    ]);
    var blobURL = window.URL.createObjectURL(blob);
    if (typeof(Worker) != 'undefined'){
        if (typeof(w) == 'undefined'){

            w = new Worker(blobURL);
            w.onmessage = function(event){
                document.getElementById('num').innerHTML = event.data;
            } 
            w.postMessage({
               num:parseInt(document.getElementById('num').innerHTML)})
        }
    }
}


function stopWorker() { 
    w.terminate();
    w = undefined;
}

Wie bereits erwähnt, unterstützt Chrom dies nicht. Ich definiere meine Mitarbeiter gerne in derselben Datei. Dies ist eine funktionierende Problemumgehung, bei der die Anzahl der in innerHTML des Elements gefundenen Elemente id=numalle 500 ms erhöht wird.

Ein wahrscheinlicher Grund ist, dass Sie mit Chrome keine Web-Worker laden können, wenn Sie Skripte aus einer lokalen Datei ausführen. Und ich versuche den Code auf meinem Firefox auszuführen, kann auch nicht.

Ja, es funktioniert nicht im Chorom, wenn Sie eine lokale Datei laden. Aber es wird gut in Firefox-Browser funktionieren. Und Sie müssen den folgenden Code in die HTML-Datei einfügen.

<head>
    <meta charset="UTF-8" />
</head>