私は、静的なWebページのみを提供するWebサーバーを使用する以外に選択肢がないプロジェクトに取り組んでいます。
これは(うまくいけば)一時的な解決策ですが、サイトは十分に複雑なので、各ページに埋め込むために、メニューの少なくとも一部を個別のコードに分割できる必要があります。
jQuery .load()関数を使用して解決策を見つけたと思いました。これは、1つだけをロードする場合はうまく機能しますが、2つをロードしようとすると、画像がダウンロードされていることを通知するだけで、エラーは発生しません。
これが私が使用しようとしているコードです
<!DOCTYPE html>
<html>
<head>
<title>Test Site</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<link rel="icon" href="Graphics/Icons/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="Shortcut Icon" href="Graphics/Icons/favicon.ico" />
<link rel="Stylesheet" type="text/css" href="StyleSheets/Main.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#footer").load("WebParts/Footer.html");
$("#header1").load("WebParts/Header.html");
});
</script>
</head>
<body>
<div id="header1" />
<div id="content">
</div>
<div id="footer" />
</body>
</html>
WebPartsという名前の.htmlファイルを含むディレクトリがあります
footer.htmlファイルは次のようになります
<div>HI! I'm a footer <img src="someimage.png" alt="image description" /></div>
header.htmlファイルは次のようになります
<div>HI! I'm a header! yay look at me</div>
divの1つをロードしますが、それ以外のものを再度ロードすることはありません。
どんな助けでも大歓迎です。