Q&A
おそらくですが、file://で直接読み込んだ、というパターンなのではないでしょうか。
###サーバーを使わないローカル環境での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件
0
残念ながら、「サーバを使わない」という条件で動かすことはできません。
現行のChromeでは、「同じドメイン」もしくは「CORSの設定が通る先」からしかimportを読み込めないので、ローカルファイルどうしのアクセスではこれらを満たせないのです。
なお、HTML ImportsはSafariでは実装予定がないとのことなので、macOSやiOS対応を考えると、（技術自体のテストならともかく）現状では実用しづらいと思います。
投稿2017/08/28 06:21
編集2017/08/28 06:23総合スコア146483
0
ローカルでどの様な環境にされておられるのか分かりませんが、エラーを見たところ
access-control-allow-origin ヘッダで無効にされておられるようですが。
投稿2017/08/28 06:14
総合スコア5030
そうなんですね。
こちら、どのようにすれば有効にできますか？
Apacheはインストールされていますが、実行はしていません。
apache が起動できないのであればコンテンツ内容を全て javascript で表現して script タグで読み込んでください。以下例です。
function getBody() { return "<div>コンテンツ内容</div>"; }
これを本体側から script タグで読み込み、getBody から得た物で innerHTML を置き換えて下さい。
apache を起動できるのであれば、http://localhost/ (ポート番号は環境により異なります)から参照すれば解決するはずです。
回答ありがとうございます。
残念ながらApacheが入っていないPCで動作を確認することになるため、Apacheを使わずに読み込みたいです。
ブラウザですが、今回使用するブラウザはIE以外のブラウザです。
であれば予め include された状態の HTML を提供されるか、上記の様に script タグを使って HTML (ファイルではなく文字列として)を読み込む事になります。この方法の場合、モダンブラウザであればブラウザは選びません。
本番では $.load を使うけど、動作確認だけそういう環境になるという事でしたら apache に満たない小さいウェブサーバを使われるのが良いかと思います。例えば以下はファイルのサーブしか出来ない小さなウェブサーバです。
https://github.com/mattn/serve
ビルドする必要(要golang)はありますが、一度ビルドするとstatic linkなので持ち運べます。
>script タグを使って HTML (ファイルではなく文字列として)を読み込む事になります。
ではこの方法で行きたいと考えていますが、私ではJavaScriptに全く明るくないため、今一つ実装方法がわかりません。
お手数ですが、もう少し詳細な実装の仕方を教えていただきたいです。
サンプルコード、デモサイト等あればそちらも教えていただけると大変助かります。
http://jsdo.it/mattn_jp/I5Aw
このページで「コンテンツの中身です」と表示されていると思います。この文字列は
http://jsrun.it/assets/i/Z/2/O/iZ2OD
この js で宣言している getBody から返している物です。html を見て貰えれば分かりますが、これを script タグで読み込んでいます。この getBody の中にある文字列に html を張り付けて頂く事になります。実際は単なる js の読み込みでしかありません。
ありがとうございます。
追加で質問させていただきたいのですが、
＞ return "<div>コンテンツの中身です</div>"
で、外部HTML(今回はnav.html)をgetBodyにreturnさせることは可能でしょうか？
できるだけHTMLとjsを分離したいです。
残念ですが、それは出来ません。ちなみにこの手法が必要なケースというのは、HTML ファイルが複数あり、かつ条件によって読み込み分けないといけなくて、しかも親の HTML に予め取り込んで非表示にしておくといった事も難しい！という、かなり限定された状況です。
おそらくですが、始めから HTML を埋め込んでおいて非表示にしておく方が、お聞きしている内容から推測できる質問者さんのスキルからするとより簡単なのでは思います。
そうなんですね。
しかし、今回はページ数の都合上、どうしても外部から読み込ませる必要があるのです。
https://teratail.com/questions/10812
こちらの方の実装方法を参考にさせていただいてもいいかなと思っています。
object タグを使う場合、埋め込んだ HTML に URL を指定する様なアンカー(aタグ)があった場合に期待通りに動かなくなります。それでよければそちらの回答をお使いになられると良いかと思います。
Safariなどで確認した場合、動作はするのですがレイアウトの崩れが激しかったためほかの方法を取ることにしました。
jQueryのloadメソッドが使えないかを試してみます。
先にお伝えしておくと出来ないと思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/28 06:44