用途

在一個HTML檔案的部分區域引入其他外部HTML

▼示意圖

上圖使用了2個外部HTML，檔案結構如下

• 主頁面〔index.html〕
• 主選單（橫條選單）〔main-nav.html〕
• 側選單（直條選單）〔verti-nav.html〕

在主頁面〔index.html〕頁面中，引入2個選單HTML〔main-nav.html〕&〔verti-nav.html〕

native JS 方法

const xhr=new XMLHttpRequest();
xhr.open("GET", "../verti-navs.html", true);
xhr.send();

xhr.onreadystatechange=function(){
 if(xhr.readyState==4 && xhr.status==200){

    document.querySelectorAll(".verti-nav")[0].innerHTML = xhr.responseText;

    }
};

jQuery 方法：load

$(".verti-nav").load("verti-navs.html");

觀看環境

外部載入HTML、ajax等做法會涉及到檔案之間的溝通，所以無法普通地在本機電腦打開觀看。需要透過以下的環境打開檔案。

觀看環境一：localhost

• 安裝XAMPP
• 使用Webpack+Node.js
• 利用終端機內建的python設定localhost環境

以下介紹用終端機設定localhost環境的方法

cd /Users/Desktop/web 
#指定要打開的資料夾

python -m SimpleHTTPServer 9099

輸入完畢後開啟瀏覽器，打開網址：http://localhost:9099
就會跳出index.html的頁面

觀看環境二：FireFox

FireFox也支援檔案之間的溝通。
但是，必須要先從index.html打開，再用index.html連到其他的頁面。否則FF會抓不到根目錄。

JS的撰寫方式

針對load進來的選單HTML撰寫JS時，有時會發生選單相關JS沒有被執行到的狀況。（特別在localhost環境下觀看時）

原因：JS的語言特性會偷跑，如果所有HTML的JS都要統一管理成同一份檔案，必須考慮到瀏覽器載入HTML的順序，再安排JS的撰寫位置。

一般來說，瀏覽器載入檔案的順序會是這樣：

1. 主HTML檔案
2. JS檔案
3. load進來的選單HTML
   （因為選單load進來的動作是由JS控制，所以JS一定會比選單HTML早一步執行）

※因為JS檔案（內含選單相關JS）在選單HTML存在前就被載入了，所以當JS執行的時候並不存在選單HTML，導致JS的程式無效。

解決：

1. 將選單相關JS寫在XMLHttpRequest的動作裡面。
2. 並且增加一條判斷式：如果response存在，才執行選單JS

const xhr=new XMLHttpRequest();
xhr.open("GET", "../verti-navs.html", true);
xhr.send();

xhr.onreadystatechange=function(){
 if(xhr.readyState==4 && xhr.status==200){

    document.querySelectorAll(".verti-nav")[0].innerHTML = xhr.responseText;
    if(xhr.responseText){
       //這邊撰寫選單相關JS

     }
  }
};