iT邦幫忙

0

各位好, 請問有辦法將html獨立出來一個檔案, 需要時再插入嗎?
例如原本是這樣:

<div>
    <div>
        content1
    </div>
    <div>
        content2
    </div>
    ...
</div>

但由於content內容較長, 全部放一起維護不易, 是否可以這樣:
content1.html
content2.html

<div>
    插入content1.html
    插入content2.html
    ...
</div>
froce iT邦大師 1 級 ‧ 2019-10-31 16:32:41 檢舉
可以啊,ajax動態載入、iframe、或是用後端server side模版渲染。
4
海綿寶寶
iT邦大神 1 級 ‧ 2019-10-31 16:51:53
最佳解答

提供參考
另一種做法:w3 的做法

選我正解

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-10-31 17:13:24 檢舉

這是要引用什麼js檔案嗎?

阿薩姆 iT邦新手 5 級 ‧ 2019-10-31 17:38:01 檢舉

海綿寶寶
這可以使用, 但有個疑問
以我在head引入的script來說:

<script src="../javascripts/test.js"></script>

而我html放在這路徑:"../../folder/myhtml.html"
但卻找不到檔案, 是為什麼?

阿薩姆 iT邦新手 5 級 ‧ 2019-10-31 17:38:45 檢舉

如果放在"../folder/myhtml.html"就沒問題

讀入的html內,只是單純的文字內容。並不會去運行內容中的js。
這點你要注意。

另外要注意相對路徑跟絕對路徑的不同

froce iT邦大師 1 級 ‧ 2019-11-01 08:50:28 檢舉

本來沒仔細看(因為不會用到),結果仔細一看,這不就是ajax嗎。XD

阿薩姆 iT邦新手 5 級 ‧ 2019-11-01 08:52:42 檢舉

浩瀚星空
是的 是純文字內容
我那樣寫是相對路徑吧? 可是卻找不到?
為什麼放在../javascripts這層可以, ../這裡也可以
但../../folder就不行, 有辦法知道他目前的位置嗎?

阿薩姆 iT邦新手 5 級 ‧ 2019-11-01 08:55:00 檢舉

froce
對阿這是AJAX
難道在head與在body的相對路徑會不相同?

dragonH iT邦超人 6 級 ‧ 2019-11-01 09:17:39 檢舉

難道在head與在body的相對路徑會不相同?

這要問你阿XD

阿薩姆 iT邦新手 5 級 ‧ 2019-11-01 09:36:26 檢舉

由於我是使用express, 加入下面程式碼就可以使用了, 但還是不知道為什麼原本的不行

app.use('/static', express.static(__dirname + '/MyFolder'));
<div w3-include-html="static/test.ejs"></div> 
dragonH iT邦超人 6 級 ‧ 2019-11-01 09:41:55 檢舉

阿薩姆

.......

你有用 view engine 阿

阿直接用他的 include 不就好了 /images/emoticon/emoticon10.gif

參考

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>
阿薩姆 iT邦新手 5 級 ‧ 2019-11-01 10:17:01 檢舉

dragonH
這include的用法..看不是很懂, 那一小段code是什麼意思?

dragonH iT邦超人 6 級 ‧ 2019-11-01 10:20:41 檢舉

阿薩姆

重點在 include 這行

你的情況可能可以寫成 (假設你的 footer 在同一層 folder)

<%- include('footer', { data: data }); %>

後面那個 data 就是你可以傳到 ejs 裡面用的 變數

froce iT邦大師 1 級 ‧ 2019-11-01 10:44:26 檢舉

沒在寫node.js的人路過。
這就是server side render,在後端把你的html組合成你要的樣子而已。

0
YoChen
iT邦研究生 5 級 ‧ 2019-10-31 16:30:39
<iframe src="other.html"></iframe>

詳細內容請參考官方文件: MDN iframe

2
小魚
iT邦大師 1 級 ‧ 2019-10-31 17:13:05

iframe可以,
不過現在比較不推薦,
通常是可以用後端的方式,
如 PHP 或 ASP.NET (MVC) 等,
或是純前端的話可以考慮用
React, Vue 等框架來處理.

1
dragonH
iT邦超人 6 級 ‧ 2019-10-31 17:25:01

如果這是你之前問的那個 nodejs project 的話

可以用 pug + express

1
阿展展展
iT邦好手 1 級 ‧ 2019-11-01 06:25:43

了解如何在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站台的根目錄為參考基礎的目錄路徑。之所以稱為絕對,意思是指當所有網頁引用同一個檔案時,所使用的路徑都是一樣的。
阿薩姆 iT邦新手 5 級 ‧ 2019-11-01 09:37:45 檢舉

謝謝提供~不過上面有人先提供這方法了
Thanks~

1
fillano
iT邦超人 1 級 ‧ 2019-11-04 10:53:13

一時興起,簡單地用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的方法是一樣的意思,頂多讓他看起來簡潔一點,包裝好一點。

最後,這只是概念驗證,有幾個問題:

  1. 用eval來動態套用template string,這樣的做法一般是不太建議的
  2. 每次render都需要透過fetch去抓內容,效率不好,不過我懶得改,畢竟只是驗證
0
obelisk0114
iT邦新手 5 級 ‧ 2019-11-04 18:16:13

若是框架可以用 directive 插入

我要發表回答

立即登入回答