ローカルファイルのJavascript・JSONをCORSを無視して動かす

ローカル環境でJSONを読み込ませたい時にCORSの制限に引っかかりますよね。
取り合えずちょっと試したい時なんかの方法を探していたらありました。

先人に感謝です。

 

参考にしたサイト

FireFox

https://hint-life.hateblo.jp/entry/2020/03/02/164658

https://www.doraxdora.com/blog/2019/07/16/post-9131/

Chrome

https://www.doraxdora.com/blog/2019/06/14/post-8783/

上のサイトをまとめると、

FireFox

アドレスバーに「about:config」を入力して開き、「security.fileuri.strict_origin_policy」の値を、true から false に変更。

Chrome

起動オプションに--allow-file-access-from-filesをつけて管理者権限で起動すればいいらしい。

具体的には、

１．chrome.exeのショートカットを作成してそのプロパティの中でリンク先に上のオプションをつけます。

リンク先：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

２．ショートカットのプロパティの互換性タブの中の「管理者としてこのプログラムを実行する」にチェック。

Chromeが起動していない状態で作成したショートカットから起動。

確認方法：chromeのアドレスバーに「chrome://version」を入力して開きコマンドラインの項目に--allow-file-access-from-filesがあればOK。

File API & XMLHttpRequestでファイルアップロード

大容量ファイルのアップロード周りを便利にしようと思いいいのみつけた、blueimp jQuery-File-Upload。

https://github.com/blueimp/jQuery-File-Upload

なかなかいいじゃないかと途中まで組み込んで問題発生。orz

・問題点１
アップロード後のサーバサイドでの処理に時間がかかる場合、それも進捗状況表示に加えたいのだがいまいちやり方がわからない。


・問題点２
IEが微妙に未対応。アップロード自体は可能。


・問題点３
ファイルサイズが大きい（233MB以上）とアップロードできない。

１は調べれば何とかなりそう、２はとりあえずアップロードは可能なので目を瞑る。
３はかなり問題。本来の目的が大容量のファイルの扱いだったので。

でどこが悪いのかな～と調査開始。
単純化するために、JavascriptのFile APIとXMLHttpRequest + PHPで簡単にアップロードの仕組みを作ってみた。

jQueryも使って、Javascriptはこんな感じ↓
（参考URL：　http://d.hatena.ne.jp/takuya_1st/20121101/1351754417　ありがとうございます）

$('#upload').bind('click', function(){
var fd = new FormData();
var f = document.getElementById("file").files[0];
fd.append('userfile', f);
$.ajax({
async: true,
xhr : function(){
XHR = $.ajaxSettings.xhr();
if (XHR.upload) {
XHR.upload.addEventListener(
'progress',
function (e) {
progre = parseInt(e.loaded/e.total*10000)/100 ;
console.log(progre+"%") ;
$("#progress_bar").width(parseInt(progre/100*300*100)/100+"px");
$("#progress_bar").height("30px");
$("#progress_bar").html(progre+"%");
},
false
);
}
return XHR;
},
url:  "",
type: "post",
data:fd,
contentType: false,
processData: false
}).done(function(msg) {
console.log(msg);
$("#output").append(msg);
});
});

Chromeは問題なし。
FireFoxは大きいファイルでこけることがある。FFを再起動すると問題ないのでFFのメモリ関係でしょうか（未検証）。
IEはFile APIとかFormDataが使えないので当然ながら動きません。

サーバ側は同じプログラムで受けとっているので、問題３はblueimp jQuery-File-Uploadによるものかな？　これに手を入れるのはためらわれるということでしゃーない自作するか。

今回はサーバ側も自由にいじれるのでPHPのAPCやPHP5.4を使うのもいいんだが、他で使うことも考えてFile API & XMLHttpRequestで突き進んでみよう。
IEだけ分岐して単純な仕様でないてもらおう。

つくづく適当だな。

parentElement

TextRange.parentElement()

次のようなHTML Sourceがブラウザで表示されているとする。

＜body＞
＜div＞a1＜/div＞
＜div＞b2＜/div＞
＜div＞c3＜/div＞
＜/body＞

（つまり、実際のブラウザの表示は
a1
b2
c3
といった感じ）

下記の部分を選択しているとする。

＜div＞a1＜/div＞
＜div＞b2＜/div＞

parentElement()の返すものは＜div＞b2＜/div＞のノード。

＜div＞a1＜/div＞
＜div＞b
といった選択や
a
といった選択の場合はちゃんとparentを返すのに・・・。