ローカル環境でのHTMLインクルード方法

###サーバーを使わないローカル環境でのHTMLインクルード方法

HTMLとCSSを使い、ローカル環境でのWebサイトを開発しています。
Topページ(index.html)にてグローバルナビゲーション部に部品化したグローバルナビゲーションを外部HTML(nav.html)にて読み込みたいと考えています。

【ディレクトリ構造】
●ルートディレクトリ
1 html
1-1 page(ページごとのHTMLファイルを格納)
1-1-1 index.html
1-2 item（部品ごとのHTMLファイルを格納）
1-2-1 nav.html
2 css
2-1 page(ページごとのCSSファイルを格納)
2-1-1 index.css
2-2 item（部品ごとのCSSファイルを格納）
2-2-2 nav.css
3 images

使用しているブラウザはGoogle Choromeです。
バージョンは60.0.3112.101の64ビットです。

https://www.html5rocks.com/ja/tutorials/webcomponents/imports/
一番手ごろそうだと思い、このページを参考にnav.htmlをindex.htmlにインクルードしようとしました。
index.htmlのhead内に<link rel="import" href="../item/nav.html">
ここから先の実装方法を教えていただきたいです。
単純に読み込んでリロードした段階では以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

Access to Imported resource at '【ルートディレクトリ】/html/item/nav.html' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

###該当のソースコード
index.html

<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../../css/page/index.css">
		<link rel="import" href="../item/nav.html">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>

	<body>
		<header>
			<h1>サンプル</h1>
		</header>

		<article id ="content_box">
			<nav>
			<!-- ここにnav.htmlを表示させたいです。 -->
			</nav>
		</article>

		<fotter>
		</fotter>
	</body>
</html>

nav.html

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../../css/item/nav.css">
	</head>
	<body>
		<ul id ="nav">
			<li><a href="#" ontouchstart="">Home</a></li>
			<li><a href="#" ontouchstart="">About</a></li>
			<li><a href="#" ontouchstart="">Blog</a></li>
			<li><a href="#" ontouchstart="">Sitemap</li>
		</ul>
	</body>
</html>

###補足
こっちのやり方がいい、ということであれば教えていただきたいです。
ただしiframe、サーバーサイドを活用するというやり方はなしでお願いします。

行動規範の内容に同意します

回答2件

残念ながら、「サーバを使わない」という条件で動かすことはできません。

現行のChromeでは、「同じドメイン」もしくは「CORSの設定が通る先」からしかimportを読み込めないので、ローカルファイルどうしのアクセスではこれらを満たせないのです。

なお、HTML ImportsはSafariでは実装予定がないとのことなので、macOSやiOS対応を考えると、（技術自体のテストならともかく）現状では実用しづらいと思います。

投稿2017/08/28 06:21

編集2017/08/28 06:23

maisumakun

総合スコア146543

Misaki0714

2017/08/28 06:44

回答ありがとうございます。であれば、ほかにローカル環境で読み込ませられる方法があれば教えていただきたいです。

行動規範の内容に同意します

ローカルでどの様な環境にされておられるのか分かりませんが、エラーを見たところ

access-control-allow-origin ヘッダで無効にされておられるようですが。

投稿2017/08/28 06:14

mattn

総合スコア5030

maisumakun

2017/08/28 06:21

おそらくですが、file://で直接読み込んだ、というパターンなのではないでしょうか。

Misaki0714

2017/08/28 06:24

そうなんですね。こちら、どのようにすれば有効にできますか？ Apacheはインストールされていますが、実行はしていません。

mattn

2017/08/28 06:28

apache が起動できないのであればコンテンツ内容を全て javascript で表現して script タグで読み込んでください。以下例です。 function getBody() { return "<div>コンテンツ内容</div>"; } これを本体側から script タグで読み込み、getBody から得た物で innerHTML を置き換えて下さい。

mattn

2017/08/28 06:29

apache を起動できるのであれば、http://localhost/ (ポート番号は環境により異なります)から参照すれば解決するはずです。

Misaki0714

2017/08/28 06:43

回答ありがとうございます。残念ながらApacheが入っていないPCで動作を確認することになるため、Apacheを使わずに読み込みたいです。ブラウザですが、今回使用するブラウザはIE以外のブラウザです。

mattn

2017/08/28 06:47

であれば予め include された状態の HTML を提供されるか、上記の様に script タグを使って HTML (ファイルではなく文字列として)を読み込む事になります。この方法の場合、モダンブラウザであればブラウザは選びません。本番では $.load を使うけど、動作確認だけそういう環境になるという事でしたら apache に満たない小さいウェブサーバを使われるのが良いかと思います。例えば以下はファイルのサーブしか出来ない小さなウェブサーバです。 https://github.com/mattn/serve ビルドする必要(要golang)はありますが、一度ビルドするとstatic linkなので持ち運べます。

Misaki0714

2017/08/28 06:52

>script タグを使って HTML (ファイルではなく文字列として)を読み込む事になります。ではこの方法で行きたいと考えていますが、私ではJavaScriptに全く明るくないため、今一つ実装方法がわかりません。お手数ですが、もう少し詳細な実装の仕方を教えていただきたいです。サンプルコード、デモサイト等あればそちらも教えていただけると大変助かります。

mattn

2017/08/28 07:02

http://jsdo.it/mattn_jp/I5Aw このページで「コンテンツの中身です」と表示されていると思います。この文字列は http://jsrun.it/assets/i/Z/2/O/iZ2OD この js で宣言している getBody から返している物です。html を見て貰えれば分かりますが、これを script タグで読み込んでいます。この getBody の中にある文字列に html を張り付けて頂く事になります。実際は単なる js の読み込みでしかありません。

Misaki0714

2017/08/28 07:26

ありがとうございます。追加で質問させていただきたいのですが、＞ return "<div>コンテンツの中身です</div>" で、外部HTML(今回はnav.html)をgetBodyにreturnさせることは可能でしょうか？できるだけHTMLとjsを分離したいです。

mattn

2017/08/28 07:30

残念ですが、それは出来ません。ちなみにこの手法が必要なケースというのは、HTML ファイルが複数あり、かつ条件によって読み込み分けないといけなくて、しかも親の HTML に予め取り込んで非表示にしておくといった事も難しい！という、かなり限定された状況です。おそらくですが、始めから HTML を埋め込んでおいて非表示にしておく方が、お聞きしている内容から推測できる質問者さんのスキルからするとより簡単なのでは思います。

Misaki0714

2017/08/28 07:52

そうなんですね。しかし、今回はページ数の都合上、どうしても外部から読み込ませる必要があるのです。 https://teratail.com/questions/10812 こちらの方の実装方法を参考にさせていただいてもいいかなと思っています。

mattn

2017/08/28 08:09

object タグを使う場合、埋め込んだ HTML に URL を指定する様なアンカー(aタグ)があった場合に期待通りに動かなくなります。それでよければそちらの回答をお使いになられると良いかと思います。

Misaki0714

2017/08/28 08:18

Safariなどで確認した場合、動作はするのですがレイアウトの崩れが激しかったためほかの方法を取ることにしました。 jQueryのloadメソッドが使えないかを試してみます。

mattn

2017/08/28 08:23

先にお伝えしておくと出来ないと思います。