2015-11-12 8 views
6

ウィンドウの幅が600pxより小さい場合、既存のdivにHTMLファイルをロードする必要があります。jQueryのロード機能がローカルで動作しない

コードは次のとおりです。

<head> 
<script> 
    $(document).ready(function(){ 
     if($(window).width() < 600) { 
      $("#testing_div").load("C:/Users/elena/Desktop/Demo/prova.html"); 
     } 
    }); 
</script> 
</head> 
<body> 
    <div id="testing_div"> </div> 
</body> 

私は私のウェブサイトにこのコードをテストしているし、それが動作しますが、多分私はそれがローカルで動作させるために何か間違ったことをしています。

load機能がローカルではなくウェブサーバー上でのみ機能する理由はありますか?

+10

ローカルファイルシステムにリクエストすることはできません。ウェブサーバーを使用する必要があります。 –

+1

あなたのブラウザコンソールはあなたの親友です。クロスオリジン要求は、プロトコルスキーム(http、データ、クロム、クロムエクステンション、https、クロムエクステンションリソース)でのみサポートされています。また、jQueryライブラリにはどこにリンクしていますか?これは ''タグの間であるべきです – NewToJS

+1

このタイプのファイルシステムアクセスがクライアント側から利用可能である場合、どのようなセキュリティ問題が発生するかを想像してください。 – px5x2

答えて

4

理由はセキュリティです。 file://プロトコルでWebページを実行すると、セキュリティの問題が発生するため、多くの機能が無効になりました。あなたはNode.jsを使ってjavascriptでウェブサーバーを作ることができ、Apacheやそれに類するものをインストールすることなくローカルのWebサーバーを持つことができます。

Node.jsのWebページ:

https://nodejs.org/en/

-1

私はすぐにそれを解決するには2つの方法があります。

1 - google chromeで「Allow-Control-Allow-Origin」拡張子をダウンロードできます。

2 - あなたはwampプログラムをインストールできます.wampはローカルWebサーバーをシミュレートします。この場合、次のURLを使用してページにアクセスします。

+0

これに対してWAMPは過剰です。単純なNode.js 'serve'で十分です。 – Matheus208

+0

ok @ Matheus208しかし、将来的に彼女はウェブサーバー上に置くでしょう。 –

関連する問題