web-dev-qa-db-ja.com

Chromeはウェブワーカーを読み込めません

私はウェブワーカーを使用するプロジェクトに取り組んでいます。

私の頭のセクションには、このコードがあります：

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

これはSafariで正常に機能しますが、Chromeは次のエラーを報告します。

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

これはSafariでは完全に機能するが、Chromeでは機能しないのはなぜですか？どうすれば修正できますか？

ありがとうございました。

javascriptgoogle-chromeweb-worker
96
Progo

Chromeでは、ローカルファイルからスクリプトを実行するときにウェブワーカーを読み込むことはできません。

72
Nobel Chicken

回避策を使用します。 ChromeブロックWorkerはブロックしますが、<script>はブロックしません。したがって、普遍的なソリューションを作成する最良の方法は次のとおりです。

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

次に、通常の<script src="..."としてリンクします。そして、関数が定義されたら、次のコードの憎悪を使用します。

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

この問題はノーブルチキンによって適切に説明されていますが、より一般的な解決策があります。 wampまたはxampをインストールする代わりに、pythonを使用して、プロジェクトがホストされているフォルダーに移動し、次のように入力できます：python -m http.server

それだけで、そのフォルダーに実行中のサーバーがあり、localhostからアクセスできます。

33
Robert Parcus

Chromeの起動時に-allow-file-access-from-filesフラグを使用することもできます。

MacOsXの例：

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

詳細： クロームのWebワーカー設定

28
Mickaël

これは、セキュリティ制限のためです。 http://の代わりにhttps://またはfile:///プロトコルを使用する必要があります。

NodeJSがインストールされている場合は、次の操作を実行できます。 -これは利用可能な多くのオプションの1つであることに注意してください

インストール local-web-server

$ npm install -g local-web-server

これで、httpを介してコンテンツにアクセスする任意のフォルダーで使用できます。

$ ws

http://localhost:8000（デフォルトのポート：8000）に移動します

8
Safeer Hussain

私もあなたの投稿と同じ問題を抱えていました。解決策は、localhost（wampまたはxamp）で実行する必要があることです。終わります。

6
Thara

あなたはローカルファイルの代わりにHTTPプロトコルからのリクエストのためにウェブサーバーを必要とし、正しく動作します:)

3
Alireza Alallah

別の回避策は、Googleの Chrome用Webサーバー 拡張機能を使用することです。作業ディレクトリを選択して、サーバーを起動します、完了！

3
Yubo

Chromeはファイルをロードしますが、実行できません。 Firefoxを使用します。それは私のために働いています。

3
Hocine Ben

Python 2.xはPython 3.xよりも広く展開されているため、python -m SimpleHTTPServer 8000のようなものがMac OS Xだけでなく、より一般的に適用可能です。たとえば、Cygwinでの使用に必要です。

これを適切に配置すると、 この例 はチャンピオンのように機能しました。

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

前述のように、chromeはサポートしていません。同じファイルでワーカーを定義するのが好きです。これは、500msごとにid=numを持つ要素のinnerHTMLで見つかった数を増やす作業上の回避策です。

1
Dominik Kolesar

chromeのローカルhttpサーバーを作成する簡単な方法は、このアプリです：

Chrome用Webサーバー

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

説明：

Chrome用のWebサーバーは、HTTPを使用して、ネットワーク経由でローカルフォルダーからWebページを提供します。オフラインで実行します。 Chrome用のWebサーバーは、Chrome用のオープンソース（MIT）HTTPサーバーです。

Chromeがインストールされている場所であればどこでも実行されるため、どこにでも持ち運ぶことができます。 ARM chromebookでも動作します。

ローカルネットワークでリッスンするオプションが追加され、他のコンピューターがファイルにアクセスできるようになりました。さらに、インターネットアドレスを取得することもできます。

多くの人がこれを使用して、Chromebookで基本的なWeb開発を行います。また、コンピューター間またはインターネット上でローカルネットワークを介してファイルを共有する場合にも便利です。

インストールしたら、 http://127.0.0.1:8887 に移動します

また、フラグ-allow-file-access-from-filesとして安全ではありません

1
A. Denis

おそらく理由は、chromeでは、ローカルファイルからスクリプトを実行するときにWebワーカーをロードできないためです。そして、私はFirefoxでコードを実行しようとしましたが、どちらもできません。

0
Eric Chang