有幾個方法,你可以去實現一個類似於你所描述的東西。你應該使用哪種實現取決於你的目標是什麼。
首先,我會推薦一些模板系統,如VueJS,AngularJS或React。但是,鑑於您說您沒有使用服務器端語言的選項,我懷疑您不會選擇實施其中一個系統。
我的下一個建議是建立你自己的'模板系統'。一個可能適合你的需求的簡單實現可能是以下內容的鏡像:
在您想要將其他文件路由或複製到的主文件(根文件)中,可以使用JS來包含正確的HTML文件。例如,根據某些情況,您可以根據特定情況通過在條件語句之後添加類似如下內容來有條件加載文件:
請注意,這樣做可以優化服務器的數據使用情況(因爲它只會提供所需的文件和而不是所有的時間),它也可能會增加加載時間。您的網站需要等待額外的HTTP請求才能通過,並且無論請求的內容如何加載客戶端上的呈現內容&。雖然這聽起來非常慢,但如果您沒有太多的離散請求,那麼它的潛力可能並不是那麼糟糕,而且您的代碼都不是特別大或計算成本很高。
如果使用香草JS,在下面將舉例以上: 在這種預裝了您的路由文件的腳本:
function read(text) {
var xhr=new XMLHttpRequest;
xhr.open('GET',text);
xhr.onload=show;
xhr.send();
}
function show() {
var text = this.response;
document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML
}
read(path/to/file/on/server);
注意幾個關於上述代碼的東西。如果您在計算機上進行測試(即在瀏覽器中打開html文件,並使用類似file:// __的路徑),則在嘗試創建XML請求時,您會遇到某種交叉源請求錯誤。要繞過這個錯誤,要麼在真正的服務器上測試你的代碼(我不知道經常推送代碼),或者最好設置一個本地測試服務器。如果這是你想要探索的事情,那麼不難做到,讓我知道,我很樂意引導你完成整個過程。
或者,您可以使用jQuery和函數實現上述加載系統。 http://api.jquery.com/load/
如果以上解決方案都不適合您,請讓我更具體地瞭解您需要什麼,並且我會很樂意提供更有用的相關答案!
Javascript不是服務器端。你需要使用一些像PHP這樣的服務器端語言。 –
即使有可能,這也不是一個正確的方法。正如@AndreaGesti建議的那樣,使用一些服務器端語言(PHP,Ruby,Python ...) –
我知道我應該使用服務器端語言,但我沒有那個選項......): – zurricanjeep