使用 JavaScript 載入外部 HTML 檔案

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 使用 JavaScript fetch() 方法載入外部 HTML 檔案
  2. 使用 jQuery load() 方法載入外部 HTML 檔案
使用 JavaScript 載入外部 HTML 檔案

有時,我們必須根據專案要求,使用 JavaScript 或 jQuery 將外部 HTML 檔案載入到另一個 HTML 檔案中。本教程舉例說明如何使用 JavaScript 和 jQuery 載入外部 HTML 檔案。

使用 JavaScript fetch() 方法載入外部 HTML 檔案

HTML 程式碼 (home.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Home Page</title>
	</head>
	<body>
		<p>This content is loaded from the home page</p>
	</body>
</html>

HTML 程式碼 (index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src=
		"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
		</script>
		<script src="./script.js"></script>
		<link rel="stylesheet" href="./styles.css">
	</head>
	<body>
		<button onclick="loadHTML()">
            Click to load content from home.html file
        </button>
		<div id="homePage">
	 		<p>The content from Home Page will be displayed here</p>
		</div>
	</body>
</html>

CSS 程式碼(styles.css):

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 5px;
    padding: 2px 20px;
    cursor: pointer;
}

button{
    margin: 5px;
    padding: 2px 20px;
}

p{
    font-size: 14px;
}

JavaScript 程式碼(script.js):

function loadHTML(){
  fetch('home.html')
  .then(response=> response.text())
  .then(text=> document.getElementById('homePage').innerHTML = text);
}

輸出:

使用 javascript 載入外部 html 檔案 - 獲取輸出

fetch() 函式請求伺服器在各種網頁上載入資料。

我們使用 fetch() 函式從 localhost 獲取 home.html 檔案。fetch() 方法返回一個 Promise

此外,使用了 Response 介面的 text() 方法,該方法接受 Response 流,讀取它並返回一個 Promise,該 Promise 使用 String 解決。請記住,Response 是使用 UTF-8 解碼的。

之後,我們使用 getElementById() 方法獲取 id 為 homePage 的元素,並通過 .innerHTML 屬性將其內部 HTML 替換為 text

使用 jQuery load() 方法載入外部 HTML 檔案

HTML 程式碼 (home.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Home Page</title>
	</head>
	<body>
		<p>This content is loaded from the home page</p>
	</body>
</html>

HTML 程式碼 (index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src=
		"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
		</script>
		<script src="./script.js"></script>
		<link rel="stylesheet" href="./styles.css">
	</head>
	<body>
		<div id="homePage">
			Home Page
			<p>Click to load content from <b>home.html</b> file</p>
		</div>
	</body>
</html>

CSS 程式碼(styles.css):

div{
    border: 2px solid rgb(255, 0, 0);
    width: fit-content;
    margin: 20px auto;
    padding: 2px 20px;
    cursor: pointer;
}

p{
    font-size: 14px;
}

JavaScript 程式碼(script.js):

$(document).ready(function () {
  $('#homePage').click(function () {
          $(this).load('home.html');
   });
});

輸出:

使用 javascript 載入外部 html 檔案 - 載入輸出

ready() 方法檢查檔案是否完全準備好。此事件僅在文件物件模型已完全載入時發生。

load() 方法從伺服器載入資訊(資料),並將伺服器返回的資料獲取到指定元素中。

我們使用 ready() 方法來確保 DOM 在進一步操作之前完全準備好。home.html 檔案將使用 load() 方法載入。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript HTML