私はウェブワーカーを使用するプロジェクトに取り組んでいます。
私の頭のセクションには、このコードがあります:
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では機能しないのはなぜですか?どうすれば修正できますか?
ありがとうございました。
Chromeでは、ローカルファイルからスクリプトを実行するときにウェブワーカーを読み込むことはできません。
回避策を使用します。 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'})));
この問題はノーブルチキンによって適切に説明されていますが、より一般的な解決策があります。 wampまたはxampをインストールする代わりに、pythonを使用して、プロジェクトがホストされているフォルダーに移動し、次のように入力できます:python -m http.server
それだけで、そのフォルダーに実行中のサーバーがあり、localhostからアクセスできます。
Chromeの起動時に-allow-file-access-from-filesフラグを使用することもできます。
MacOsXの例:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
詳細: クロームのWebワーカー設定
これは、セキュリティ制限のためです。 http://
の代わりにhttps://
またはfile:///
プロトコルを使用する必要があります。
NodeJSがインストールされている場合は、次の操作を実行できます。 -これは利用可能な多くのオプションの1つであることに注意してください
インストール local-web-server
$ npm install -g local-web-server
これで、http
を介してコンテンツにアクセスする任意のフォルダーで使用できます。
$ ws
http://localhost:8000
(デフォルトのポート:8000)に移動します
私もあなたの投稿と同じ問題を抱えていました。解決策は、localhost(wampまたはxamp)で実行する必要があることです。終わります。
あなたはローカルファイルの代わりにHTTPプロトコルからのリクエストのためにウェブサーバーを必要とし、正しく動作します:)
別の回避策は、Googleの Chrome用Webサーバー 拡張機能を使用することです。作業ディレクトリを選択して、サーバーを起動します、完了!
Chrome
はファイルをロードしますが、実行できません。 Firefox
を使用します。それは私のために働いています。
Python 2.xはPython 3.xよりも広く展開されているため、python -m SimpleHTTPServer 8000
のようなものがMac OS Xだけでなく、より一般的に適用可能です。たとえば、Cygwinでの使用に必要です。
これを適切に配置すると、 この例 はチャンピオンのように機能しました。
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で見つかった数を増やす作業上の回避策です。
chromeのローカルhttpサーバーを作成する簡単な方法は、このアプリです:
Chrome用Webサーバー
説明:
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として安全ではありません
おそらく理由は、chromeでは、ローカルファイルからスクリプトを実行するときにWebワーカーをロードできないためです。そして、私はFirefoxでコードを実行しようとしましたが、どちらもできません。