別のHTMLファイルからブートストラップモーダルコンテンツを取得する

基本的に私が達成しようとしているのは、索引htmlファイルにモーダルコンテンツを置くのではなく、別のhtmlファイルからブートストラップモーダルのコンテンツを取得することです複数回）。別のHTMLファイルからブートストラップモーダルコンテンツを取得する

私は答えをハイとローの検索を試してみた、と私が持っている最も近いがこれです：Getting Bootstrap's modal content from another page

それはモーダルコンテンツのいずれかを示していないので、しかし、私は問題を抱えています。空白のモーダルを表示しているだけで、どこが間違っているのか分かりません。メインHTML：：

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <i class="fa fa-bar-chart-o fa-fw"></i> Pre-IDA Test 
    </div> 

    <div class="panel-body"> 
     <div id="chartdiv" style="width: 100%; height: 400px;"></div> 
     <script> pretest() </script> 
     <a href="pretestmodal.html" class="btn btn-info" data-toggle="modal" data-target="#testing">View Data</a> 
     <div id="testing" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

モーダル内容：

は、以下の私の関連するコードです

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 

    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Details</h4> 
    </div> 
    <!-- /.modal-header --> 
    <div class="modal-body"> 
     <div class="table-responsive"> 
      <table class="table table-bordered table-hover table-striped"> 
       <thead> 
        <tr> 
         <th>Year/Quarter</th> 
         <th>Indoor Quarterly Results</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>2016 Q1</td> 
         <td>Q1 (59/60)</td>     
        </tr> 
        <tr> 
         <td>2016 Q2</td> 
         <td>Q2 (58/60)</td>  
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <!-- /.table-responsive --> 
    </div> 
    <!-- /.modal-body --> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    <!-- /.modal-footer --> 
    </body> 
</html>

EDIT： JavaScriptコンソールを見た後、私はエラーを見つけたどのは：

jquery.min.js:4 XMLHttpRequest cannot load file:///E:/PORTAL/pages/pretestmodal.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

どのように私はこれを修正することができますか？

出典

2017-05-24 nurul98

Javascript Consoleを見てみましたか？あなたのコードをデバッグするのに役立ついくつかのエラーがあります。たとえば、Chromeでコンソールを開くには、Ctrlキー（またはCommandキー）+ Shift + iキーを押します。 –

@DanielArthurはコンソールを見てくれてありがとう！私はいくつかの誤りを見つけました。私はOPでそれを編集します。 – nurul98

を含めたいファイルにモーダルを入れて、あなたが発生している問題は、Google Chromeでfile:///プロトコルを使用してWebサイトのファイルを表示するときに、非常に一般的なものです。

あなたがあなたのログにされるエラーメッセージを見てみた場合：HTTP、データ、クロム、クロムの拡張、HTTPS：

クロスオリジン・リクエストは唯一のプロトコルスキームのためにサポートされています。あなたがしようとすると、別のドメインから（例えばJavascriptのファイルやCSSファイルなど）のリソースにアクセスする際に洞察力のビットとして

は、 a cross origin requestが発生します。ウェブサイトをローカルファイル（Chromeの file:///プロトコルを使用）として表示すると、アクセスできるファイルの種類が制限されます。これは same-origin policyと呼ばれます。これらのポリシーは、コンピュータに影響を及ぼすクロスサイトスクリプティング（XSS）攻撃などの攻撃を防ぐために存在します。

うまくあなたの問題を説明しfile:///のURIのための同一生成元ポリシーにMozilla Developer Network has an interesting article：

たとえばに、あなたは別のファイルの内容でbar.htmlにアクセスfoo.htmlファイルを持っているし、あなたがナビゲートしている場合bar.htmlがindex.htmlと同じディレクトリにあるか、index.htmlと同じディレクトリに含まれるディレクトリにある場合にのみロードが成功します。

あなたが経験したエラーです。あなたがアクセスしようとしているファイルがおそらくクロスオリジン要求エラーの原因となっている別のディレクトリ。

ローカルファイルシステムでWebサイトをテストしているため、これらの問題がすべて発生していることには注意してください。この問題を解決するには、localhostサーバーでウェブサイトをテストする必要があります。これは実質的には、HTTPまたはHTTPSのいずれかを使用してウェブサイトをテストできることを意味します。

お使いのPC上でlocalhostサーバーを作成するためのいくつかの良い解決策は以下のとおりです。

XAMPP - Windows版、Mac版、Linux版の良い解決策
WampServer - Windowsのための別の解決策だけ。
- XAMPPのWebサイトにアクセスし、適切なインストーラをダウンロード：
私はので、ここでWampServerに不慣れだがXAMPPのための命令です。これにより、インストール先の選択を促すメッセージが表示されます。 Windowsでは、通常C:\xamppです。
置きフォルダ内ウェブのすべてのファイル<xampp installation folder>\htdoc\
オープンXAMPPのコントロールパネルと、WebブラウザでタイプlocalhostをStart

Apache

が

をEnterキーを押しますあなたが説明した問題なしにあなたのウェブサイトを見てください。

出典

2017-05-24 09:07:58

うわあ、ありがとう！私は実際にxamppを持っていますが、私はHTMLファイルで作業しているので使用していませんでした。私は数時間のためにこれで立ち往生したhahaはありがとう！これについて私の知識を広げるだけで、なぜlocalhost上でテストしなければそれが問題なのか教えていただけますか？ – nurul98

もちろん、私はすぐに私の答えを更新します！ –

@ nurul98私はあなたがなぜ問題を遭遇したかについてのより多くの情報を与えるために私の答えを更新しました:) –

w3-includeを試すことができます。ちょうどあなたが

<!DOCTYPE html> 
<html> 
<script src="https://www.w3schools.com/lib/w3.js"></script> 

<body> 

<div w3-include-html="modal.html"></div> 

<script> 
w3.includeHTML(); 
</script> 

</body> 
</html>

出典

2017-05-24 08:42:52 Swellar

別のHTMLファイルからブートストラップモーダルコンテンツを取得する

答えて

関連する問題