從文件打開時HTML不工作，從ftp服務器運行

我想爲網頁編寫html和css，但是當我直接從文件打開文件時它不顯示任何內容。當我通過我的ftp服務器訪問它時，它工作正常，甚至來自同一臺PC和瀏覽器。我試圖尋找解決方案谷歌，但我沒能找到任何從文件打開時HTML不工作，從ftp服務器運行

的index.html：

<!DOCTYPE html> 
<html> 
<link rel="stylesheet" href="style.css"> 
<script src="https://www.w3schools.com/lib/w3data.js"></script> 

<head lang="en"> 
<meta charset="utf-8"> 
<title>Employee Page</title> 
</head> 

<body> 
<div id="header"></div> 
<br><br> 
<div id="content"></div> 
<div id="footer"></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script> 
    $("#header").load("header.html"); 
    $("#content").load("startingContent.html"); 
    $("#footer").load("footer.html"); 
</script> 
</body> 
</html>

了header.html

<header> 
<nav id="menu"> 
    <img id="logo" src="Images/logo.png" height="150" style="border: 5px solid black"> 
    <ul> 
     <li> <a href="ftp://wtpa.ddns.net/Site/index.html">Home</a></li> 
     <li> <a href="ftp://wtpa.ddns.net/Site/calendar.html">Calendar</a> 
     </li> 
     <li> <a href="ftp://wtpa.ddns.net/Site/contacts.html">Contacts</a> 
     </li> 

     <li class="dropdown"> 
      <a href="javascript:void(0)" class="dropbtn">File Server</a> 
      <div class="dropdown-content"> 
       <a href="#">Documents</a> 
       <a href="#">GameFiles</a> 
       <a href="#">Videos</a> 
      </div> 
     </li> 
    </ul> 
</nav> 

</header>

style.css

.menu { 
width: 100%; 
vertical-align:top; 
height:25px; 
float: top; 
} 

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
} 

li { 
float: left; 
font-size: 16px; 
display:inline-block; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
background-color: red; 
} 

li.dropdown { 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1; 
} 

.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 

display: block; 
}

任何幫助表示讚賞。謝謝！

來源

2017-04-19 K.Ward

點擊F12來檢查控制檯，你會看到一些錯誤信息會幫助你 – moped

也許你需要MAMP或XAMP來運行這個代碼我不確定，但是如果你使用'.load（）'你需要做的在本地不起作用的請求，這就是爲什麼你需要虛擬機？ – DaniP

首先，看起來您的導航正在使用絕對鏈接。

<li> <a href="ftp://wtpa.ddns.net/Site/index.html">Home</a></li> 
<li> <a href="ftp://wtpa.ddns.net/Site/calendar.html">Calendar</a> 
</li> 
<li> <a href="ftp://wtpa.ddns.net/Site/contacts.html">Contacts</a> 
</li>

此外，您可以調出控制檯，查看網站的哪些部分拒絕加載並更改路由。

編輯

你不能清楚地出於安全原因，加載這些資源。通過file：//協議運行頁面已經禁用了很多功能，因爲安全問題。您始終可以使用Node.js創建一個JavaScript服務器，並在本地託管它，而無需安裝Apache或類似的東西。

https://nodejs.org/en/

來源

2017-04-19 14:32:27

對不起，我忘了在初始文章中添加圖片。我已編輯它，並添加該網站的圖像，當它的工作，當它不是與錯誤 –

剛剛回答你的問題@ K.Ward！ –

解決了我的問題！感謝您的幫助！！！ –

嘗試檢查其他文件是在index.html的同一文件夾中。問題可能是它無法在本地找到其他文件。爲了確保您可以複製目錄中的所有文件（例如桌面），然後重試。

來源

2017-04-19 14:56:19

當地發展的典型問題是開放的內容，就像在瀏覽器中的文件：

file:// ...

，然後用一些動態的元素，你可以得到錯誤：

XMLHttpRequest cannot load file:/// ... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

解決辦法是在本地安裝web server機器並通過http（s）協議打開 - 例如。 NGINX，Apache或使用在線服務，如WebCloud。

請參閱http here上的woking示例。

我希望我能幫上忙。

來源

2017-04-19 15:07:22

謝謝你的幫助！ –

不客氣。 –

從文件打開時HTML不工作，從ftp服務器運行

回答

相關問題