htmlのコンテンツをHTMLページにロード

誰かがこの質問に重複して記入する前に、私はこの問題について多くの調査を行いましたが、私の問題に対する解決策はまだ見つかりませんでした。したがって、私はこれらのheader.htmlとfooter.htmlファイルを持っており、その内容を新しいHTMLページに読み込みたいのです（コードを繰り返しないようにしようとしています）。私は非常に簡単な方法でこれらをPHPで行うことができることを知っていますが、私はJQueryでそれをやろうとしています。これは、これまでの私のコードです：htmlのコンテンツをHTMLページにロード

<!DOCTYPE html> 
<html> 

    <head> 
      <link rel="stylesheet" type="text/css" href="./style.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

      <script> 
       $(function(){ 
        $('#filename').load("footer.html"); 
       }); 
      </script>  
    </head> 

    <body> 

     <div id="filename"></div> 

    </body> 
</html>

私は、次のエラーを取得しています：

jquery.min.js:5 XMLHttpRequest cannot load file:///C:/Users/...../footer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery.min.js:5ajax @ jquery.min.js:5b.fn.load @ jquery.min.js:5(anonymous function) @ index.html:10c @ jquery.min.js:3fireWith @ jquery.min.js:3ready @ jquery.min.js:3H @ jquery.min.js:3

出典

2016-09-11 Anonymous

あなたは本当にヘッダーとフッターをこのようにロードするべきではありません。ページのリクエスト数が増えているだけです。あなたが持っている必要があるのは、コンテンツページをインポートする "ベース"ページのヘッダとフッタです。 – Soviut

正確なクロスオリジンエラーは何ですか？ 'footer.html'リクエストのレスポンスヘッダを表示できますか？ – Brad

サイトの構造によっては、静的なページを必要とするが、共通のテンプレートを使用する方法で構築されている場合は、Webpackのようなバンドラを考えるかもしれません。これは、静的なHTMLを全ページで展開する方法です（どのCDNでも簡単にホストできるため）が、共通のテンプレートを維持するだけです。 – Brad

ローカルドライブにAJAXリクエストを作成することはできません.HTTPサーバーがないため、HTTPリクエストは作成できません。あなたが得ているクロスオリジンエラーは、やや誤解を招きます。

ページをサーバーに配置します。

も参照してください：https://stackoverflow.com/a/20578692/362536

出典

2016-09-11 02:15:52 Brad

-1

あなたはjQueryのを配置したので、要素がロードされた前に、あなたのコードが動作しなかった理由がありますサイト内で動作しないようにします。

あなたはそれを修正するために、このようなものを使用することができます

$(document).ready(function() { 
    $('#filename').load("footer.html"); 
});

ページの要素が既にページにロードされるまでこれがお待ちしておりますし、それが持つ要素にfooter.htmlのコンテンツをロードしますファイル名のID。

出典

2016-09-11 02:03:17 FluxCoder

これは間違っています。問題のコードはすでにこれを行っています。 – Brad

htmlのコンテンツをHTMLページにロード

答えて

関連する問題