HTML5中怎么導入文件

本篇內容主要講解“HTML5中怎么導入文件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5中怎么導入文件”吧!

Template，Shadow DOM和Custom Elements讓您創建UI組件比以前更容易了。但是像HTML，CSS，JavaScript這樣的資源仍然需要一個個地去加載，這是很沒效率的。

例如，現在加載jQuery UI或Bootstrap就需要為JavaScript，CSS及Web字體添加單獨的標簽。如果您的Web組件應用了多重的依賴，那事情就變得更加復雜。

HTML導入讓您以一個合并的HTML文件來加載這些資源。使用HTML導入

為加載一個HTML文件，您需要增加一個鏈接標簽，其相關屬性為import，herf屬性是HTML文件的路徑。例如，如果您想把component.html加載到index.html：

index.html

XML / HTML代碼將內容復制到文本

< link rel = “ import” href = “ component.html” >       

您可以往HTML導入文件（譯者注：此處將“導入的HTML”譯為“ HTML導入文件”，將“原始HTML”譯為“ HTML主文件”。例如，index.html是HTML主文件， component.html是HTML導入文件。）添加任何的資源，包括腳本，樣式表和字體，就跟往普通的HTML添加資源一樣。

component.html

XML / HTML代碼將內容復制到文本

< link rel = “ stylesheet” href = “ css / style.css” >    

<腳本src = “ js / script.js” > </腳本>   

doctype，html，head，body這些標簽是不需要的。HTML導入會立即加載要引入的文檔，解析文檔中的資源，如果有腳本的話也會立即執行它們。執行順序

瀏覽器解析HTML文檔的方式是線性的，這就是說HTML頂部的腳本會比底部先執行。并且，瀏覽器通常會等到JavaScript代碼執行完畢后，才會接著解析后面的代碼。

為了不讓腳本壓縮HTML的渲染，你可以在標簽中添加async或Defer屬性（或者你也可以將腳本標簽放到頁面的底部）。defer屬性會重復腳本的執行，直到全部頁面解析完成。async屬性讓瀏覽器初始化地執行腳本，從而不會阻止HTML的渲染。那么，HTML導入是怎樣工作的呢？

HTML導入文件中的腳本就跟著包含defer屬性一樣。例如在下面的示例中，index.html會先執行script1.js和script2.js，然后再執行script3.js。

index.html

XML / HTML代碼將內容復制到文本

< link rel = “ import” href = “ component.html” >  // 1。     

< title >導入示例</ title >  

< script src = “ script3.js” > </ script >         // 4。   

component.html

XML / HTML代碼將內容復制到文本

< script src = “ js / script1.js” > </ script >      // 2。    

< script src = “ js / script2.js” > </ script >      // 3。   

1.在index.html中加載component.html并等待執行

2.執行component.html中的script1.js

3.執行完script1.js后執行component.html中的script2.js

4.執行完script2.js繼而執行index.html中的script3.js

注意，如果給link [rel =“ import”]添加異步屬性，HTML導入會把它當做包含異步屬性的腳本來對待。它不會等待HTML導入文件的執行和加載，這意味著HTML導入不會阻止HTML主文件的渲染。這也給提升網站性能帶來了可能，除非有其他的腳本依賴于HTML引入文件的執行。跨域引入

從根本上說，HTML引入是不能從其他的域名引入資源的。

例如，您不能從http://webcomponents.org/向http://example.com/導入HTML文件。為了繞過這個限制，可以使用CORS（跨域資源共享）。想了解CORS，請看這篇文章。HTML導入文件中的窗口和文檔對象

前面我提過在引入HTML文件的時候里面的腳本是會被執行的，但這并不意味著HTML引入文件中的標簽也會被瀏覽器渲染。你需要寫一些JavaScript代碼來幫忙。

當在HTML導入文件中使用JavaScript時，有一點要提防的是，HTML導入文件中的文檔對象實際上指的是HTML主文件中的文檔對象。以前面的代碼為例，index.html和組件。 html的文檔都是指index.html的文檔對象。怎么才能使用HTML導入文件中的文檔呢？可以鏈接中的導入屬性。

index.html

XML / HTML代碼將內容復制到文本

var  link  =  document .querySelector（'link [ rel = “ import” ]'）;   

link.addEventListener（'load'，function（e）{   

  var  importedDoc  = 鏈接.import;   

  // importedDoc指向component.html下的文檔   

}）;  

為了獲取component.html中的文檔對象，要使用document.currentScript.ownerDocument。

component.html

XML / HTML代碼將內容復制到文本

var  mainDoc  =  document .currentScript.ownerDocument;   

// mainDoc指向component.html下的文檔  

如果您在用webcomponents.js，那么就用document._currentScript來代替document.currentScript。下劃線用于填充currentScript屬性，因為不是所有的瀏覽器都支持這個屬性。

component.html

XML / HTML代碼將內容復制到文本

var  mainDoc  =  document ._currentScript.ownerDocument;   

// mainDoc指向component.html下的文檔   

通過在腳本開頭添加下面的代碼，您就可以輕松地訪問component.html中的文檔對象，而不用管瀏覽器是不是支持HTML導入。document._currentScript = document._currentScript || document.currentScript;性能方面的考慮

使用HTML引入的一個好處是能夠將資源組織起來，但是也意味著在加載這些資源的時候，由于使用了一些額外的HTML文件而讓它們變得過大。有幾點是需要考慮的：解析依賴

例如，您要從導入文件中加載jQuery，如果每個引入文件都包含加載jQuery的script標簽，則如果HTML主文件要依賴多個導入文件，而且引入文件中包含相同的庫，這時會怎樣呢？那么jQuery就會被加載兩次，并且也會被執行兩次。

index.html

XML / HTML代碼將內容復制到文本

< link rel = “ import” href = “ component1.html” >    

< link rel = “ import” href = “ component2.html” >    

component1.html

XML / HTML代碼將內容復制到文本

<腳本src = “ js / jquery.js” > </腳本>   

component2.html HTML引入自動幫你解決了這個問題。

以前面的代碼為例，通過將加載jQuery腳本標簽的做法不同，HTML引入對已經加載過的HTML文件進行進行，并通過加載jQuery的腳本標簽打包成一個HTML導入文件，這樣jQuery就只被加載和執行一次了。

而是還有一個問題：我們增加了一個要加載的文件。怎么處理多個擴展的文件呢？幸運的是，我們有一個叫vulcanize的工具來解決這個問題。合并網絡請求

Vulcanize能將多個HTML文件合并成一個文件，從而減少了網絡連接數。您可以通過npm安裝它，并使用命令行來使用它。您可能同時使用grunt和gulp托管一些任務，這樣的話你可以把vulcanize作為建造過程的一部分。

為了解析依賴以及合并index.html中的引入文件，使用如下命令：

復制代碼

代碼如下：

$ vulcanize -o vulcanized.html index.html

通過執行這個命令，index.html中的依賴會被解析，并且會產生一個合并的HTML文件，插入vulcanized.html。學習更多有關vulcanize的知識，請看這兒。

注意：http2的服務器推送功能被考慮為以后刪除文件的鏈接與合并。把Template，Shadow DOM，自定義元素跟HTML引入結合起來

你之前可能沒有看過這些文章，我先解釋一下：Template可以讓你用聲明的方式定義你的自定義元素的內容。ShadowDOM可以讓一個元素的樣式，ID，類只作用到其本身。自定義元素可以讓你自定義HTML標簽。通過把這些跟HTML引入結合起來，你自定義的網絡組件會變為替代，具有重疊性。任何人添加一個Link標簽就可以使用它。

x-component.html

XML / HTML代碼將內容復制到文本

< template id = “ template” >   

  <樣式>  

    ...   

  </ style >  

  < div id = “容器” >   

    < img src = “ http://webcomponents.org/img/logo.svg” >   

    < content select = “ h2” > </ content >   

  </ div >  

</模板>  

<腳本>  

  //此元素將被注冊到index.html   

  //因為`document`在這里是index.html中的那個   

  var  XComponent  =  document .registerElement（'x-component'，{   

    原型：Object.create（HTMLElement.prototype，{   

      createdCallback：{   

        值：function（）{   

          var  root  =  this .createShadowRoot（）;   

          var  template  =  document .querySelector（'＃template'）;   

          var  clone  =  document .importNode（template.content，true）;   

          root.appendChild（clone）;   

        }   

      }   

    }）   

  }）;   

</腳本>  

index.html

XML / HTML代碼將內容復制到文本

...   

  < link rel = “ import” href = “ x-component.html” >    

</頭>  

<身體>  

  < x分量>  

    < h2 >這是自定義元素</ h2 >  

  </ x-component >  

  ...  

注意，因為X-component.html中的文檔對象跟的index.html的一樣，你沒必要再寫一些棘手的代碼，它會自動為你注冊。支持的瀏覽器

Chrome和Opera提供對HTML導入的支持，Firefox要在2014年12月后才支持（Mozilla表示Firefox不計劃在最初提供對HTML導入的支持，并需要首先了解ES6的模塊是如何實現的）。

您可以去chromestatus.com或caniuse.com查詢瀏覽器是否支持HTML導入。想要在其他瀏覽器上使用HTML導入，可以使用webcomponents.js（原名platform.js）。

到此，相信大家對“HTML5中怎么導入文件”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！