HTMLサブページの作成方法-htmlチュートリアル-php.cn

HTMLサブページの作成方法

王林

リリース： 2024-02-22 17:15:03

オリジナル

1159 人が閲覧しました

HTMLサブページの作成方法

HTML サブページの確立と使用

インターネットと Web ページ技術の発展に伴い、情報の整理と管理にサブページを使用する必要がある Web サイトやアプリケーションがますます増えています。。 HTML サブページを使用すると、Web サイトをよりモジュール化して保守しやすくすると同時に、より優れたユーザーエクスペリエンスを提供できます。この記事では、HTML でサブページを作成する方法を説明し、具体的なコード例を示します。

1. サブページの作成

まず、親ページを作成する必要があります。親ページは通常、子ページをロードして表示するメイン HTML ファイルです。親ページでは、<iframe></iframe> 要素を使用して子ページを埋め込むことができます。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <h1>这是父页面</h1>
    <iframe src="子页面.html"></iframe>
</body>
</html>

ログイン後にコピー

次に、サブページを作成する必要があります。サブページは通常、特定のコンテンツと機能を含む別の HTML ファイルです。サブページでは、任意の HTML コードを記述することができます。サンプルコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
</head>
<body>
    <h2>这是子页面</h2>
    <p>这是子页面的内容。</p>
</body>
</html>

ログイン後にコピー

2. サブページの使用

ブラウザで親ページを開くと、同時にサブページが読み込まれて表示されます。時間。親ページでは、<iframe> 要素の src 属性で子ページのファイルパスを指定します。ブラウザはファイルパスに基づいてサブページを自動的にロードし、親ページに埋め込みます。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <h1>这是父页面</h1>
    <iframe src="子页面.html"></iframe>
</body>
</html>

ログイン後にコピー

親ページ内のサブページを操作または制御する必要がある場合は、JavaScript を使用して実現できます。 <iframe> 要素の contentWindow 属性を通じて、サブページのウィンドウオブジェクトを取得できます。次に、サブページのウィンドウオブジェクトを使用して、サブページのコンテンツの変更、サブページの関数の呼び出しなど、さまざまな操作を実行できます。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
    <script>
        function changeContent() {
            var iframe = document.getElementsByTagName('iframe')[0];
            var childWindow = iframe.contentWindow;
            var childDocument = childWindow.document;
            var childHeading = childDocument.getElementsByTagName('h2')[0];
            childHeading.innerText = '子页面内容已修改';
        }
    </script>
</head>
<body>
    <h1>这是父页面</h1>
    <iframe src="子页面.html"></iframe>
    <button onclick="changeContent()">修改子页面内容</button>
</body>
</html>

ログイン後にコピー

上記のコードは、changeContent() という名前の JavaScript 関数を定義しており、サブディレクトリ内の <h2># を取得します。 -page.## 要素を作成し、そのテキストの内容を変更します。次に、親ページにボタンを追加し、</h2>onclick イベントを通じて関数をバインドします。ボタンをクリックすると、親ページは changeContent() 関数を呼び出して、子ページのコンテンツを変更します。

概要

HTML サブページを使用すると、複雑な Web サイトとアプリケーションをモジュール部分に分割でき、保守と管理が容易になります。

以上がHTMLサブページの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。