資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 檔案中包含另一個 HTML 檔案？
在本教程中，我們將學習如何在 HTML 檔案中包含另一個 HTML 檔案。
有多種方法可以在 HTML 檔案中包含另一個 HTML 檔案。讓我們快速瀏覽一下網路上支援的技術。
使用 JQuery load 包含 HTML 檔案
在本節中，我們將檢查如何使用 JQuery 的 load 方法來包含 HTML 檔案。
使用者可以按照以下語法使用此方法。
語法
$(wrapper).load(htmlfile);
包裝器追加 jQuery 載入的新 HTML 檔案。
引數
wrapper - 包含新 HTML 內容的 DOM 元素的 ID。
htmlfile - 新 HTML 檔名。
示例
程式需要兩個 HTML 檔案。一個是載入新 HTML 檔案的主 HTML 檔案。接下來是新的 HTML 檔案。將這兩個檔案放在相同的位置。
在主 HTML 檔案中定義一個包裝器 DOM 元素以追加新 HTML 檔案。使用 jQuery load 技術載入新 HTML 檔案並將其設定在包裝器 DOM 內部。
內部 HTML 檔案
<html> <body> <h3>This is an HTML page from same directory</h3> </body> </html>
主 HTML 檔案
<html> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $("#includeHtml").load("result.html"); }); </script> </head> <body> <h2>Program to include another HTML file in this HTML using <i>JQuery load</i></h2> <div id="includeHtml"></div> </body> </html>
輸出
使用 w3-include-html 屬性包含 HTML 檔案
在本節中，讓我們檢查如何使用 w3-include-html 屬性來包含 HTML 檔案。
使用者可以按照以下語法使用此方法。
語法
<div w3-include-html="filename.html"></div>
包括一個帶有屬性 w3-include-html 的包裝器 DOM，其值是新 HTML 檔名。
//Read the attribute fileName = domEl.getAttribute("w3-include-html"); //Make XMLHttpRequest with the attribute value xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { //If the request is successful, load the new HTML. Else throw 404 error and try again if (this.readyState == 4) { if (this.status == 200) {domEl.innerHTML = this.responseText;} if (this.status == 404) {domEl.innerHTML = "Error 404";} /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); } xmlHttp.open("GET", fileName, true); xmlHttp.send();
語法讀取 w3-include-html 屬性值並使用 XMLHttpRequest 載入新 HTML。
示例
在此示例中，建立一個新的 HTML 和一個預設的 HTML 檔案。預設 HTML 檔案包含一個帶有屬性 w3-include-html 的 div 元素，該元素包含新 HTML 檔名。
程式讀取 w3-include-html 屬性值，使用檔名建立一個 XMLHttpRequest 並載入檔案。
檔案載入成功後，新的 HTML 檔案會在 w3-include-html 包裝器 DOM 內呈現。否則使用者會收到錯誤訊息，程式會重新載入檔案。
內部 HTML 檔案
<html> <body> <header><b>HTML 2 HEADER</b></header> <div style="height: 100px;"></div> <footer><b>HTML 2 FOOTER</b></footer> </body> </html>
主 HTML 檔案
<html> <body> <h2>Program to include another HTML file in this HTML using <i>w3-include-html</i></h2> <div w3-include-html="result.html"></div> <script> function addHTML() { var el, i, domEl, fileName, xmlHttp; /*Iterate all DOM*/ el = document.getElementsByTagName("*"); for (i = 0; i < el.length; i++) { domEl = el[i]; /*find the element having w3-include-html attribute*/ fileName = domEl.getAttribute("w3-include-html"); if (fileName) { /*http request with attribute value as file name*/ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { domEl.innerHTML = this.responseText; } if (this.status == 404) { domEl.innerHTML = "Page not found."; } /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); } } xmlHttp.open("GET", fileName, true); xmlHttp.send(); /*function ends*/ return; } } } addHTML(); </script> </body> </html>
輸出
使用 htmlinclude 庫包含 HTML 檔案
在本節中，我們將檢查如何使用 htmlinclude 庫來包含 HTML 檔案。
使用者可以按照以下語法使用此方法。
語法
<script src="library.js"></script>
語法新增 javascript 庫檔案 URL。
<include src="./result.html"></include>
include 標籤的 src 包含新 HTML 檔名。
//Getting include attribute value let includes = document.getElementsByTagName('include'); for(var i=0; i<includes.length; i++){ let include = includes[i]; //Loading include src value load_file(includes[i].attributes.src.value, function(text){ include.insertAdjacentHTML('afterend', text); include.remove(); }); } function load_file(filename, callback) { fetch(filename).then(response => response.text()).then(text => callback(text)); }
語法使用 fetch 方法載入“include”標籤的原始碼。
示例
在此示例中，htmlinclude 庫在頭部可用。建立一個包含標籤，並將新檔名作為 src 屬性值。
在指令碼中，使用 fetch 方法載入包含標籤的 src 值。如果使用 fetch 遇到任何錯誤，請嘗試從 node.js 或任何其他程式 IDE 獲取幫助。
內部 HTML 檔案
<html> <body> <b>htmlinclude library included this HTML file</b> </body> </html>
主 HTML 檔案
<html> <head> <script src="https://unpkg.com/htmlincludejs"></script> </head> <body> <h2>Program to include another HTML file in this HTML using <i>htmlinclude library</i></h2> <include src="./result.html"></include> <script> let includes = document.getElementsByTagName('include'); for (var i = 0; i < includes.length; i++) { let include = includes[i]; load_file(includes[i].attributes.src.value, function(text) { include.insertAdjacentHTML('afterend', text); include.remove(); }); } function load_file(filename, callback) { fetch(filename).then(response => response.text()).then(text => callback(text)); } </script> </body> </html>
輸出
使用 iframe 包含 HTML 檔案
在本節中，讓我們檢查如何使用 iframe 包含 HTML 檔案。
使用者可以按照以下語法使用此方法。
語法
<iframe src="new.html"></iframe>
iframe 標籤在 src 中包含新 HTML 檔名。
示例
在此示例中，建立一個示例 HTML 檔案 以包含和主 HTML 檔案。此方法在新 HTML 的 body 中新增一個 iframe，並將新 HTML 檔名作為源值。
iframe 在主 HTML 檔案中載入新的 HTML 內容。
內部 HTML 檔案
<html> <body> <div style="background-color: skyblue;">iframe included this HTML file</div> </body> </html>
主 HTML 檔案
<html> <head> <h2>Program to include another HTML file in this HTML using <i>iframe</i></h2> <style> iframe[iframetag] { border: none; } </style> </head> <body> <div id="iframeDiv"> <iframe src="result.html" iframetag></iframe> </div> </body> </html>
輸出
本教程介紹了四種在 HTML 檔案中包含新 HTML 檔案的方法。iframe 方法易於實現。如果使用者需要 jQuery 方法，可以選擇 jQuery load 方法。
59K+ 瀏覽量
