各位好, 請問有辦法將html獨立出來一個檔案, 需要時再插入嗎?
例如原本是這樣:
<div>
<div>
content1
</div>
<div>
content2
</div>
...
</div>
但由於content內容較長, 全部放一起維護不易, 是否可以這樣:
content1.html
content2.html
<div>
插入content1.html
插入content2.html
...
</div>
已邀請的邦友 {{ invite_list.length }}/5
提供參考
另一種做法：w3 的做法
選我正解
這是要引用什麼js檔案嗎?
海綿寶寶
這可以使用, 但有個疑問
以我在head引入的script來說:
<script src="../javascripts/test.js"></script>
而我html放在這路徑:"../../folder/myhtml.html"
但卻找不到檔案, 是為什麼?
如果放在"../folder/myhtml.html"就沒問題
讀入的html內，只是單純的文字內容。並不會去運行內容中的js。
這點你要注意。
另外要注意相對路徑跟絕對路徑的不同
本來沒仔細看（因為不會用到），結果仔細一看，這不就是ajax嗎。XD
浩瀚星空
是的 是純文字內容
我那樣寫是相對路徑吧? 可是卻找不到?
為什麼放在../javascripts這層可以, ../這裡也可以
但../../folder就不行, 有辦法知道他目前的位置嗎?
froce
對阿這是AJAX
難道在head與在body的相對路徑會不相同?
難道在head與在body的相對路徑會不相同?
這要問你阿XD
由於我是使用express, 加入下面程式碼就可以使用了, 但還是不知道為什麼原本的不行
app.use('/static', express.static(__dirname + '/MyFolder'));
<div w3-include-html="static/test.ejs"></div>
.......
你有用 view engine 阿
阿直接用他的 include 不就好了 
Includes are relative to the template with the include call. (This requires the 'filename' option.) For example if you have "./views/users.ejs" and "./views/user/show.ejs" you would use <%- include('user/show'); %>.
You'll likely want to use the raw output tag (<%-) with your include to avoid double-escaping the HTML output.
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
dragonH
這include的用法..看不是很懂, 那一小段code是什麼意思?
重點在 include 這行
你的情況可能可以寫成 (假設你的 footer 在同一層 folder)
<%- include('footer', { data: data }); %>
後面那個 data 就是你可以傳到 ejs 裡面用的 變數
沒在寫node.js的人路過。
這就是server side render，在後端把你的html組合成你要的樣子而已。
iframe可以,
不過現在比較不推薦,
通常是可以用後端的方式,
如 PHP 或 ASP.NET (MVC) 等,
或是純前端的話可以考慮用
React, Vue 等框架來處理.
了解如何在HTML中包含HTML代碼段。
將要包含的HTML保存在.html文件中：
<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>
包含HTML可以通過使用w3-include-html屬性來完成：
<div w3-include-html="content.html"></div>
HTML包含由JavaScript完成。
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script>
調用頁面底部的includeHTML（）：
<script>
includeHTML();
</script>
希望有幫上你的忙
另外...
相對路徑與絕對路徑的觀念
相對路徑 – 是以引用檔案之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當不同的網頁引用同一個檔案時，其所使用的路徑都不相同，故稱之為相對。
絕對路徑 – 是以Web站台的根目錄為參考基礎的目錄路徑。之所以稱為絕對，意思是指當所有網頁引用同一個檔案時，所使用的路徑都是一樣的。
一時興起，簡單地用fetch, template strings實做前端樣板機制：
http://www.fillano.idv.tw/test1047.html
主要的html（test1047.html）：
<html>
<body>
<div id="panel1"></div>
<div id="panel2"></div>
<script>
const tmp1 = template('test1047a.html');
tmp1({title: 'This is a title', content: 'will be a good content.'})
.then(result => {
document.getElementById('panel1').innerHTML = result;
});
tmp1({title: 'Another title here', content: 'another content here.'})
.then(result => {
document.getElementById('panel2').innerHTML = result;
});
function template(url) {
return data => {
return fetch(url)
.then(resp => {
return resp
.text()
.then(txt => {
return eval(`\`${txt}\``);
});
});
}
}
</script>
</body>
</html>
載入的樣板（test1047a.html）：
<h1>${data.title}</h1>
<div>${data.content}</div>
因為需要用data這個參數來參考傳入的資料，所以樣板內得用data加上傳入資料的key來取資料。
其實這跟ajax的方法是一樣的意思，頂多讓他看起來簡潔一點，包裝好一點。
最後，這只是概念驗證，有幾個問題：
iThome鐵人賽
看影片追技術