2016-10-25 3 views
1

私は.htmlというファイルをいくつか持っており、それらのファイルにはすべて同じヘッダーが必要です。今のところ、私はHTMLの輸入を使用してChromeでこれを行うことができます。ヘッドのシミュレーションHTMLインポート

<!-- CommonHead.html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

そして、私は他のhtmlページの束を持っている:

私のようないくつかのJSとCSSファイルを持っているCommonHead.htmlと呼ばれる1ページを持っています私はこれをヘッダに入れます:

<head> 
    <link rel="import" href="CommonHead.html"> 
</head> 

これは完全に機能しています。しかし、Firefoxはこれをサポートしていないので、JavaScriptを使って同じことをする方法が欲しい。私は.loadを試しました。.geを使って、ヘッダーに何かを追加する変数には何もありません。信頼性の高いものは何もありません。

javascript/jqueryを使用してこれを行う適切な方法は何ですか? HTMLの輸入に

+0

私が最も確実な方法は、サーバー上でプロジェクトを設定し、サーバー・サイドの言語を使用することだと思いますあなたのファイルをインポートする。しかし、私は他の人が何を思いつくのか興味がある。 –

+0

@QuangdaoNguyen私は同意します。もちろん過去には、私はphpインクルード、webformsのマスターページ、MVCのレイアウトなどを行ってきました。しかし、私はサーバサイドのコードを必要としないはずのシンプルなプロジェクトに取り組んでいますが、同じヘッダをどこでも;) – Gaspa79

+0

ビルドプロセス、SSI(サーバー側を含む)、PHP、Ajaxリクエスト、DOM操作などの簡単なインクルード...オプションは多数 – Kris

答えて

0

Firefoxの現在のスタンスはhereを見つけることができます:

先に述べたように

は、Mozillaは現在、HTMLのインポートを実行するには意図されていません。これは、ES6モジュールが外部アセットをインポートする別の方法を出荷する前にES6モジュールがどのようにパニングアウトしているのかを確認したいからです。

私たちはFirefox OSのWebコンポーネントを使って1年以上働いていて、既存のモジュール構文(AMDやCommon JS)を使って依存ツリーを解決し、要素を登録しています。物事を完了するために。

HTMLインポートは、古いものとPolymerの現在の登録構文など、より簡単で宣言的なワークフローに適しています。

このシンプルさは、Importsが依存管理ソリューションとして真剣に受け止めるほどのコントロールを提供していないという批判をコミュニティからもたらしました。

理想的には、PHPのような種類のサーバーサイドコードを使用して依存関係を組み込み、レンダリングしている各HTMLページに出力するのが理想的です。

例のindex.php:

<html> 
    <head> 
     <title>Testing</title> 
     <?php include('includes/header.php'); ?> 
    </head> 
</html> 

また、あなたはまた、here見つけることができますHTMLインポートポリフィル、に見ることができます。これにより、IE11 +、Firefox、Chrome、Safari 7+、およびモバイルデバイスでHTMLインポートを使用できるようになります。注意してください。サポートされていないデバイス(つまり、10以下の場合は、この恩恵を受けることはできません)。古いクライアントとの互換性を避けるために、サーバー側言語の使用を強くお勧めします。

いくつかの他の可能性:

関連する問題