Chrome tidak dapat memuat pekerja web

Saya sedang mengerjakan proyek yang menggunakan pekerja web.

Di bagian kepala saya, saya memiliki kode ini:

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

Ini berfungsi dengan baik di Safari, tetapi Chrome melaporkan kesalahan berikut:

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

Mengapa ini berfungsi dengan sempurna di Safari tetapi tidak di Chrome? Bagaimana cara mengatasinya?

Terima kasih.

Chrome tidak mengizinkan Anda memuat pekerja web saat menjalankan skrip dari file lokal.

Saya menggunakan solusi. Chrome memblokir Workertapi tidak <script>. Karenanya cara terbaik untuk membuat solusi universal adalah ini:

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();

Anda kemudian menautkannya seperti biasa <script src="...". Dan setelah fungsinya ditentukan, Anda menggunakan kode kekejian ini:

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

Masalahnya telah dijelaskan dengan baik oleh Noble Chicken tetapi saya memiliki solusi yang lebih umum untuk itu. Alih-alih menginstal wamp atau xamp, dengan python Anda dapat menavigasi ke folder tempat proyek Anda di-host dan mengetik:python -m http.server

Hanya itu dan Anda akan memiliki server yang berjalan di folder itu, dapat dijangkau dari localhost.

Anda juga dapat menggunakan tanda --allow-file-access-from-files saat Anda meluncurkan Chrome.

Contoh untuk MacOsX:

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

Info selengkapnya: Setelan pekerja web untuk chrome

Itu karena batasan keamanan. Anda perlu menggunakan http://atau https://protokol, bukan file:///.

Jika Anda memiliki NodeJS terinstal, Anda cukup melakukan hal berikut. - Perhatikan bahwa ini adalah salah satu dari banyak opsi yang tersedia

Instal server web lokal

$ npm install -g local-web-server

Sekarang Anda dapat menggunakannya di folder mana pun yang ingin Anda akses isinya http.

$ ws

Arahkan ke http://localhost:8000(port default: 8000)

Saya juga mengalami masalah yang sama dengan postingan Anda. Solusinya adalah Anda harus menjalankannya dengan localhost (wamp atau xamp). Itu akan selesai.

Solusi lain adalah menggunakan server web Google untuk ekstensi Chrome . Pilih direktori kerja Anda dan mulai server, Selesai!

Anda memerlukan server web untuk permintaan dari protokol HTTP, bukan file lokal dan berfungsi dengan benar :)

Chromememuat file tetapi tidak dapat menjalankannya. Gunakan Firefox. Ini bekerja untuk saya.

Cara mudah membuat server http lokal di chrome adalah dengan aplikasi ini:

Server Web untuk Chrome

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

Deskripsi:

Server Web untuk Chrome, menyajikan halaman web dari folder lokal melalui jaringan, menggunakan HTTP. Berjalan offline. Server Web untuk Chrome adalah server HTTP open source (MIT) untuk Chrome.

Ini berjalan di mana pun Anda memasang Chrome, sehingga Anda dapat membawanya ke mana saja. Ia bahkan bekerja pada chromebook ARM.

Sekarang memiliki opsi untuk mendengarkan di jaringan lokal, sehingga komputer lain dapat mengakses file Anda. Selain itu, ia dapat mencoba dan mendapatkan alamat internet.

Banyak orang menggunakan ini untuk melakukan pengembangan web dasar di chromebook. Ini juga berguna untuk berbagi file melalui jaringan lokal antar komputer, atau bahkan di internet.

Setelah Anda menginstalnya, navigasikan ke http://127.0.0.1:8887

Dan itu tidak tidak aman sebagai flag --allow-file-access-from-files

Ini terinspirasi dari jawaban Thomas di atas. Tetapi dengan satu peringatan bahwa saya hanya ingin mendistribusikan HTML, jadi saya secara manual mengonversi js ke dataURL . dan mengaktifkan kotak centang URL data di dalamnya.

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

Dengan Python 2.x yang lebih banyak digunakan daripada Python 3.x, sesuatu seperti python -m SimpleHTTPServer 8000 itu lebih umum diterapkan, dan tidak hanya untuk Mac OS X. Saya merasa perlu untuk digunakan di bawah Cygwin, misalnya.

Dengan itu, contoh ini bekerja seperti seorang juara.

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;
}

Seperti yang disebutkan, chrome tidak mendukungnya. Saya suka mendefinisikan pekerja saya di file yang sama. Ini adalah solusi yang berfungsi yang akan meningkatkan jumlah yang ditemukan di innerHTML dari elemen dengan id=numsetiap 500ms.

Kemungkinan alasannya adalah chrome tidak mengizinkan Anda memuat pekerja web saat menjalankan skrip dari file lokal. Dan saya coba jalankan kode di firefox saya, tidak bisa juga.

Ya, Ini tidak akan berfungsi di chorome jika Anda memuat file lokal. Tapi itu akan bekerja dengan baik di browser firefox. Dan Anda harus menambahkan kode di bawah ini dalam file HTML.

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