28

SOで他の同一生成元ポリシーのトピックを読みましたが、ローカルファイルシステムに関連するソリューションは見ていません。

ローカルで提供する必要のあるWebアプリ（大まかな意味で）があります。ユーザーがページを読み込んだ後、ウェブページで何をしているかに応じて、大量のデータを読み込もうとしています。Firefox 3.5およびIE8では、jQueryのAJAX（）およびGetScript（）メソッドを使用してこれを行うことができますが、Chromeでは、同一生成元ポリシーのためにこれは失敗します。

XMLHttpRequestロードできませんfile://test/testdir/test.js。オリジンnullは許可されていませんby Access-Control-Allow-Origin。

これは私が次のような単純なことをしたときに起こります

$.getScript("test.js");

これはIEとFirefoxで完全に機能します。

これについてたくさん読んだ後、私はドキュメントの先頭に直接書いてみることにしました。Chromeのコンソールで、次のように入力しました。

var head = document.getElementsByTagName("head")[0];  
var script =document.createElement('script');   
script.id = 'uploadScript';  
script.type = 'text/javascript';  
script.src = "upload.js";   
head.appendChild(script);

これは、コンソールに貼り付けると正常に機能し<script...test.js</script>ます。要素がヘッドに追加され、評価され、コンテンツがDOMに読み込まれます。

このコードを関数呼び出しに入れるまで、これは成功したと思いました。同じ正確なコードを関数から呼び出すと、要素がに追加されますが、JavaScriptファイルは評価されません。理由がわかりません。Chromeのコンソールを使用して、要素を追加しているメソッドで実行を停止し、上記のコードを実行すると、Chromeはそれを評価しません。ただし、実行の一時停止を解除してまったく同じコードを実行すると（コンソールウィンドウに貼り付ける）、機能します。私はこれを説明するのに途方に暮れています。誰かがこれに以前に対処したことがありますか？

私は次のSOの投稿を読みましたが、私が抱えている問題については説明していません。

同一生成元ポリシーを回避する方法
XMLHttpRequestOriginnullは許可されていませんAccess-Control-Allow-Originforfile：/// to file：///（サーバーレス）
クロスサイトXMLHttpRequest

繰り返しになりますが、私の最後の手段は、ウェブページの読み込み時にすべてのデータを読み込むことです。これにより、アプリのユーザーの90％にとって不要な、ウェブページの読み込みに最大10秒の遅延が発生する可能性があります。

提案/代替案をありがとう!!!

4

3 に答える 3

4

私はそれを理解したと思います。

私が本当にする必要があるのは、<script>タグにコールバックを追加することだけでした。最終コード：

nextという名前の要素があります...したがって、$("#next").click()関数には次のコードがあります。これは、「次へ」をクリックした場合にのみ実行されます。

//remove old dynamically written script tag-    
       var old = document.getElementById('uploadScript');  
   if (old != null) {  
     old.parentNode.removeChild(old);  
     delete old;  
   } 

   var head = document.getElementsByTagName("head")[0];  
   script = document.createElement('script');  
   script.id = 'uploadScript';  
   script.type = 'text/javascript';  
   script.src = 'test/' + scope_dir + '/js/list.js';  
   script.onload = refresh_page;    
   head.appendChild(script);  


function refresh_page(){  
   //perform action with data loaded from the .js file.  
}

This seems to work, and allows Chrome to dynamically load .js files on the local file system while circumventing the access-control-allow-origin policy I ran into while trying to use jQuery functions.

于 2011-01-20T18:38:00.703 に答える
2

わかりました、多くのいじりをして、多くの時間を無駄にしました。しかし、私はそれを理解しました。私の最後の答えの解決策は、ChromeとMozillaでうまく機能します。ただし、IEはonloadイベントを発生させないため、祝福されたIEでは機能しません。IEはこのファイル内のすべてのonloadを処理したと見なし、別のonloadを実行させることはできません。ただし、IEはJQuery getScript関数（Chromeはccess-control-allow-originポリシーのために許可しません）を使用してファイルをロードすることを非常に喜んでいます。これを機能させるには、JQueryライブラリが必要です。だからここに私が終わったものがあります：

function getMyText(){
    var url='mylocalfile.js';
    if (jQuery.support.scriptEval) { 
        var old = document.getElementById('uploadScript');  
        if (old != null) {  
             old.parentNode.removeChild(old);  
             delete old;  
            } 
        var head = document.getElementsByTagName("head")[0]; 
        var script = document.createElement('script');
        script.id = 'uploadScript';
        script.type = 'text/javascript';
        script.onload = refresh_page; 
        script.src = url; 
        head.appendChild(script);  
    } else {
       $.getScript(url,function(){
            refresh_page();
      });
     }
}

function refresh_page() {
    alert(mytext);
}

このすべてにおいて、mylocaltext.jsは、すべてのhtmlを変数mytextのコンテンツとして定義します。醜いですが、動作します。jQuery.support.scriptEvalは、DOMが変更された場合にonloadイベントを発生させるインテリジェントブラウザーに当てはまります。IEはそうではないので、.getScriptに送信します。Chromeや他の人はそうするので、それは彼らを逆に送ります。とにかく、これはローカルファイルで機能します。

于 2011-01-25T14:58:07.767 に答える
1

興味深いですが、同じ手法を使用してHTMLファイル全体をロードするにはどうすればよいですか？あなたと同様の問題-ユーザーが見たいものに応じて、Webページに含めたいHTMLファイルが何百もあります。この手法を使用して、次のようなHTMLページ全体を読み込むことができるようです。

script.id = 'uploadScript';
script.type = 'text/html';
script.src = url; 
script.onload = refresh_page; 
head.appendChild(script);

つまり、HTMLでロードするように指示します。コンソールからページにロードされていることがわかり、「リソースはスクリプトとして解釈されますが、MIMEタイプtext/htmlで転送されます」というメッセージが表示されます。しかし、スクリプトにロードされて保持されているHTMLを取得する方法がわかりません。

于 2011-01-25T00:05:16.467 に答える