Web Component超有用網頁模組化 - 第一次使用HTML imports

2019鐵人賽

lagagain

2018-10-18 22:17:21

4539 瀏覽

分享至

關於目前我瞭解的HTML imports

昨天說到 HTML imports ，今天再來說說。

爲什麼今天會在來說說HTML imports呢？因爲我看到這篇。本以爲依照MDN所寫還沒有任何瀏覽器實做出來，但實際上Opera和Chrome是支援的，大家可以到Can I Use去看看目前各個瀏覽器支援程度。哈哈不過我個人還是習慣使用Firefox更多一些，可惜多數確實還沒支援。

不過本來以爲可以很簡單的像是PHP的include一樣，HTTP imports以後就會插入對應位置，並顯示出來。我們來試試：
test.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>for test</title>
  </head>
  <body>
    <link rel="import" href="./my-header.html">
    <h1>Hello World For Test</h1>
  </body>
</html>

my-header.html

<h1 id="myheader">This is Header</h1>
abc

<style>
h1{
color:red;
}
</style>

顯示出來結果....恩，和想象的不一樣，開起test.html，完全沒有顯示my-header.html的內容。h1倒是變了色...怎麼回事？

OK，首先第一點，HTML imports也有同源政策，也就是來源要相同，否則就有CORS的問題。如果沒處理直接開起檔案可能連變色都沒有。所以我這裏直接開了一個小網頁伺服器，恩....內容還是沒出來。好吧確定了，還是不會自己顯示，需要Javascript去正式插入到一個位置。取法和也不難，不過再來部分等下次連同CustomElementRegistry和ShadowDOM一起來是說說吧。