當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

使用HTML中Imports的方法

發布時間：2023/12/15 综合教程 35 生活家

生活随笔收集整理的這篇文章主要介紹了使用HTML中Imports的方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章主要介紹了使用HTML中Imports的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　先想想你在web上是如何加載不同類型的資源。對于JS，我們有<scriptsrc>。<linkrel="stylesheet">應該是CSS的首選。圖片可以用<img>。視頻則有<video>。音頻，<audio>web上絕大部分的內容都有簡單明了的加載方式。對于HTMLimports呢？

　　為什么需要導入imports？

　　<iframe>-可用但笨重。iframe中的內容全部存在于一個不同于當前頁的獨立上下文中。這是個很棒的特性，但也為開發者們帶來了額外的挑戰(將frame按照內容尺寸來縮放已經有點難度，在iframe和當前頁面之間寫點JS能把人繞暈，更別提操作樣式了)。

　　AJAX-我喜歡xhr.responseType="document"，可是加載HTML要用JS？這就不大對勁了。

　　CrazyHacks™-用字符串的方式嵌入頁面，像注釋一樣隱藏(例如<scripttype="text/html">)。嘔!

　　可笑不？作為web上最基礎的內容，HTML，竟然需要這么麻煩才能得到我們想要的結果。幸運的是，WebComponents總算找到了一條正確的路。

　　開始

　　HTML導入，WebComponents陣容中的一員，是在其他HTML文檔中包含HTML文檔的一種方法。當然并非僅限于此，你還可以包含CSS，JavaScript，或.html文件中能包含的任何內容。換句話說，這使得導入成為了加載相關HTML/CSS/JS的神器。

　　imports導入基礎

　　通過聲明<linkrel="import">來在頁面中包含一個導入：

<head>
　　<linkrel="import"href="/path/to/imports/stuff.html">
　　</head>

　　導入中的URL被稱為導入地址。若想跨域導入內容，導入地址必須允許CORS：

　　<linkrel="import"href

　　瀏覽器的網絡協議棧(networkstack)會對訪問相同URL的請求自動去重。這意味著從同一個URL導入的內容只會被獲取一次。無論這個地址被導入多少次，最終它將只執行一次。

以上是生活随笔為你收集整理的使用HTML中Imports的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。