【JavaScript】load HTML 外部載入HTML

用途

在一個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

將電腦設定成虛擬主機(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

     }
  }
};

Leave a Reply

Your email address will not be published. Required fields are marked *