iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

從零開始遲來的Web開發筆記系列 第 3

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

關於目前我瞭解的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去正式插入到一個位置。取法和也不難,不過再來部分等下次連同CustomElementRegistryShadowDOM一起來是說說吧。


上一篇
HTML5
下一篇
WebCompose超有用網頁模組化 - 顯示HTML imports中的內容
系列文
從零開始遲來的Web開發筆記30

尚未有邦友留言

立即登入留言