172

複数の HTML ページに含まれる共通のヘッダー ページとフッター ページを作成したいと考えています。

JavaScriptを使いたいです。HTMLとJavaScriptのみを使用してこれを行う方法はありますか?

別の HTML ページ内にヘッダーとフッターのページをロードしたいと考えています。

4

15 に答える 15

39

JavaScript で html ファイル構造を使用する必要がありますか? 単純な PHP インクルード オブジェクトを使用できるように、代わりに PHP を使用することを検討しましたか?

.html ページのファイル名を .php に変換すると、各 .php ページの上部に 1 行のコードを使用して、header.php のコンテンツを含めることができます。

<?php include('header.php'); ?>

各ページのフッターで同じことを行い、footer.php ファイルのコンテンツを含めます。

<?php include('footer.php'); ?>

JavaScript / Jquery または追加の付属ファイルは必要ありません。

NB .htaccess ファイルで以下を使用して、.html ファイルを .php ファイルに変換することもできます。

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
于 2014-12-24T03:47:10.663 に答える
4

2018年からアロハ。残念ながら、あなたと共有できるクールなものや未来的なものはありません.

load()ただし、jQueryメソッドが現在機能していないとコメントした人は、ローカル Web サーバーを実行せずにローカル ファイルでメソッドを使用しようとしている可能性があることを指摘したいと思います。これを行うと、上記の「クロス オリジン」エラーがスローされます。これは、load メソッドによって行われたようなクロス オリジン リクエストが、、、または のようなプロトコル スキームに対してのみサポートされることをhttp示しdataます https。(実際にクロスオリジン リクエストを行っていないと仮定しています。つまり、header.html ファイルは実際にはリクエスト元のページと同じドメインにあります)

したがって、上記の受け入れられた回答がうまくいかない場合は、Web サーバーを実行していることを確認してください。急いでいる場合 (および Python がプリインストールされている Mac を使用している場合) にこれを行う最も迅速で簡単な方法は、単純な Python http サーバーを起動することです。ここで、それがいかに簡単かがわかります。

これが役立つことを願っています！

于 2018-02-27T17:20:09.203 に答える
1

この質問が最初に尋ねられた後に利用可能になった別のアプローチは、reactrb-express を使用することです ( http://reactrb.orgを参照)。これにより、クライアント側で ruby​​ でスクリプトを作成し、html コードを ruby​​ で記述された反応コンポーネントに置き換えることができます。

于 2016-08-13T04:51:49.290 に答える
0

ajax
main.jsを使用する

fetch("./includes/header.html")
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.querySelector("header").innerHTML = data;
    });

fetch("./includes/footer.html")
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.querySelector("footer").innerHTML = data;
    });

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Liks</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
        <script src="/js/main.js"></script>
    </body>
</html>
于 2021-07-21T08:34:16.513 に答える
0

JavaScriptを使わずにHTMLのオブジェクトタグを利用できます。

<object data="header.html" type="text/html" height="auto"></object>
于 2021-12-13T06:00:59.620 に答える