ホームページ > 記事 > ウェブフロントエンド > HTMLサブページの作成方法
HTMLサブページの作成方法
- 王林オリジナル
- 2024-02-22 17:15:031142ブラウズ
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></iframe>要素のsrc属性で子ページのファイル パスを指定します。ブラウザはファイル パスに基づいてサブページを自動的にロードし、親ページに埋め込みます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<h1>这是父页面</h1>
<iframe src="子页面.html"></iframe>
</body>
</html>- 親ページ内のサブページを操作または制御する必要がある場合は、JavaScript を使用して実現できます。
<iframe></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サブページの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フロートをクリアする方法はありますか?次の記事：フロートをクリアする方法はありますか?