JQuery .load（）函數似乎不會加載部分HTML文件，我通過它

-1

我想使用jQuery .load（）函數加載一個部分（在這種情況下，導航欄）到一個特定的div （使用我給它作爲目標的id）。在開發我正在建設的網站時，我一直在使用Gulp，並且我設置的方式非常有效。標題加載並正常工作，沒問題。我遇到問題的地方是如果我嘗試在本地加載文件而不運行Gulp。大多數元素，CSS，JS執行沒有問題，並且根據開發人員工具網絡選項卡，jQuery CDN加載正常，但包含我試圖傳入.load（）函數的導航欄部分的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>`

我收到的控制檯這兩個錯誤：

bootstrap.min.js：6未捕獲的錯誤：引導的JavaScript需要的jQuery（匿名函數）@ bootstrap.min.js：6

jquery.min.js：4 XMLHttpRequest無法加載file：///Users/andrewpohl/personal_websites/STHR/_header.html。協議方案僅支持交叉源請求：http，data，chrome，chrome-extension，https，chrome-extension-resource。

更新：我做了一些關於XMLHttpRequest的錯誤的進一步研究，顯然如果您沒有通過本地服務器運行您的文件，這會成爲一個問題。我不知道這個問題，只是通過命令行直接向瀏覽器打開我的文件，而無需設置簡單的服務器。一旦我開始使用簡單的Python服務器，我注意到頭部開始加載而沒有使用吞嚥。

來源

2016-08-14 Andy Pohl

歡迎來到Stack Overflow！請[參觀]，環顧四周，並閱讀[幫助]，特別是[*我如何問一個好問題？*]（/幫助/如何問）不要發佈*圖片*代碼/標記。發佈代碼/標記。顯示你的嘗試。說出它做了什麼，以及你期望它做什麼。注意控制檯中的任何錯誤（如果沒有，請注意你已經看過，而且沒有）。 –

T.J.我感謝您的回覆和信息。我不得不問，爲什麼沒有代碼標記的圖片？ –

無法被搜索，無法複製和粘貼，難以在各種屏幕尺寸上閱讀，難以閱讀，如果您的顏色感知是「不同的」，... –

使用現成功能，這

<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'); 
}

你必須告訴jQuery來等待DOM被加載，然後才能採取行動。在<head>標記的末尾，DOM中沒有加載#header。

來源

2016-08-14 09:47:17

*「您必須先告訴JQuery等待DOM被加載，然後才能對其執行操作。」*不，您不*有*。您可以將'script'標籤放在'body'的末尾，就在結束標籤''之前，這個標籤主要位於它們所屬的位置。 –

我已經嘗試在.ready函數中包裝.load函數，並且在標記之前放置腳本標記，兩者都不能工作 –

T.J.我知道，但如果你不在生產環境中，我傾向於認爲這是一種不雅（更快的思路）解決方案。 –

JQuery .load（）函數似乎不會加載部分HTML文件，我通過它

回答

相關問題