HTML子頁面的建立與使用
隨著互聯網和網頁技術的發展，越來越多的網站和應用程式需要使用子頁面來組織和管理資訊。 HTML子頁面可以讓網站更加模組化和可維護，同時提供更好的使用者體驗。本文將介紹如何在HTML中建立子頁面，並提供具體的程式碼範例。
一、建立子頁面
<iframe></iframe>元素來嵌入子頁面。範例程式碼如下：<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<h1>这是父页面</h1>
<iframe src="子页面.html"></iframe>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>子页面</title>
</head>
<body>
<h2>这是子页面</h2>
<p>这是子页面的内容。</p>
</body>
</html>二、使用子頁面
<iframe>元素的src屬性指定了子頁面的檔案路徑。瀏覽器會自動根據檔案路徑載入子頁面，並將其嵌入到父頁面中。範例程式碼如下：<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<h1>这是父页面</h1>
<iframe src="子页面.html"></iframe>
</body>
</html><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></h2>元素，並修改其文字內容。然後，在父頁面中新增一個按鈕，並透過onclick事件綁定該函數。當點選按鈕時，父頁面會呼叫changeContent()函數，從而修改子頁面的內容。
總結
透過使用HTML子頁面，我們可以將複雜的網站和應用程式分割成多個模組化的部分，使其更易於維護和管理。透過嵌套<iframe></iframe>元素，我們可以在父頁面中載入和顯示子頁面。透過JavaScript，我們可以在父頁面中操作和控制子頁面。希望本文提供的程式碼範例對你理解和使用HTML子頁面有所幫助。
以上是html子頁面怎麼建的詳細內容。更多資訊請關注PHP中文網其他相關文章！
