JQueryの.load（）関数が、部分的なhtmlファイルをロードしていないようです。

-1

jQueryの.load（）関数を使用して、部分（この場合はnavbar）を特定のdivにロードしようとしています。（私が目標として与えたidを使って）。私が構築しているサイトを開発している間、私はGulpを使用していました。ヘッダーが正しく読み込まれ、問題なく動作します。私が問題に遭遇しているところは、Gulpを実行しないでローカルにファイルをロードしようとする場合です。ほとんどの要素、CSS、JSは問題なく実行され、jQuery CDNはデベロッパーツールの[ネットワーク]タブに従って正常に読み込まれますが、.load（）関数に渡そうとしているNavbar部分を含むhtmlファイルはどこにも見つからない。私は、特定のスクリプトタグの配置を変更しようとした、ファイルの名前を変更するなど、何も動作するようです。 `JQueryの.load（）関数が、部分的なhtmlファイルをロードしていないようです。

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <title>STHR | NEWS</title> 
     <link rel="stylesheet" 
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="./css/main.css"> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">  </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
    $(function(){ 
     $('#header').load('../_header.html'); 
     $('#footer').load('../_footer.html'); 
    }); 
    </script> 
</head> 
<body> 
    <div id="header"></div>`

私はコンソールでこれらの2つのエラー取得しています：

bootstrap.min.js：6不明なエラー：ブートストラップのJavaScriptは、jQueryの（匿名関数）が必要@ bootstrap.min.js：6

を

jquery.min.js：4 XMLHttpRequestはファイルをロードできません：///Users/andrewpohl/personal_websites/STHR/_header.html。 Cross originリクエストは、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。

更新：XMLHttpRequestに関するエラーをさらに調査したところ、ローカルサーバーからファイルを実行していない場合は、これが問題になることは明らかです。私はこの問題を認識しておらず、シンプルなサーバーを設定せずに、ブラウザに直接コマンドラインを介してファイルを開いていました。私がシンプルなPythonサーバーを使い始めたとき、私は気付きを使わずにヘッダが読み込まれるようになったことに気付きました。

出典

2016-08-14 Andy Pohl

ようこそスタックオーバーフロー！ [ツアー]を見て回り、[ヘルプ]、特に[*良い質問をするにはどうすればいいですか？*]（/ help/how-to-ask） *のコード/マークアップ。コード/マークアップを投稿してください。あなたが試したことを示してください。それが何をしたのか、そしてそれがあなたが代わりにやりたいと思っていたことを言ってください。コンソールからのエラーをメモします（存在しない場合は見たことに注意してください）。 –

T.J.私はあなたの反応と情報に感謝します。私は尋ねなければならない、なぜコードマークアップの写真はありませんか？ –

色の知覚が「異なっている」場合は、検索できず、コピーや貼り付けができず、さまざまな画面サイズで読みにくく、読みにくい... –

は、あなたがそれに基づいて行動することができます前に、DOMがロードされるのを待つためにjQueryのに指示する必要があり、この

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery("#header").load(""); 
     jQuery("#footer").load(""); 
    }); 
</script>

出典

2016-08-14 09:46:37

$(function(){ 
    $('#header').load('../_header.html'); 
}

にレディ機能を使用します。 <head>タグの最後にはまだ#headerがDOMにロードされていません。

出典

2016-08-14 09:47:17

*「DOMを読み込む前にJQueryにロードされるのを待たせる必要があります」* *、*には*がありません。 'body'の最後、''タグの直前に 'script'タグを置くことができます。このタグは主にそれらが属する場所です。 –

私は.ready関数で.load関数をラップするだけでなく、タグの直前にスクリプトタグを置くことを試みましたが、どちらもうまく動作しません。 –

T.J.私はそれを知っていますが、プロダクション・コンテクストではないと思っています。 –

JQueryの.load（）関数が、部分的なhtmlファイルをロードしていないようです。

答えて

関連する問題