HTML5中怎么導(dǎo)入文件

本篇內(nèi)容主要講解“HTML5中怎么導(dǎo)入文件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5中怎么導(dǎo)入文件”吧!

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

例如，現(xiàn)在加載jQuery UI或Bootstrap就需要為JavaScript，CSS及Web字體添加單獨(dú)的標(biāo)簽。如果您的Web組件應(yīng)用了多重的依賴，那事情就變得更加復(fù)雜。

HTML導(dǎo)入讓您以一個(gè)合并的HTML文件來加載這些資源。使用HTML導(dǎo)入

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

index.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

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

component.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

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

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

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

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

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

index.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

< title >導(dǎo)入示例</ title >  

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

component.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

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

1.在index.html中加載component.html并等待執(zhí)行

2.執(zhí)行component.html中的script1.js

3.執(zhí)行完script1.js后執(zhí)行component.html中的script2.js

4.執(zhí)行完script2.js繼而執(zhí)行index.html中的script3.js

注意，如果給link [rel =“ import”]添加異步屬性，HTML導(dǎo)入會(huì)把它當(dāng)做包含異步屬性的腳本來對(duì)待。它不會(huì)等待HTML導(dǎo)入文件的執(zhí)行和加載，這意味著HTML導(dǎo)入不會(huì)阻止HTML主文件的渲染。這也給提升網(wǎng)站性能帶來了可能，除非有其他的腳本依賴于HTML引入文件的執(zhí)行?？缬蛞?/p>

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

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

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

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

index.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

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

  var  importedDoc  = 鏈接.import;   

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

}）;  

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

component.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

var  mainDoc  =  document .currentScript.ownerDocument;   

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

如果您在用webcomponents.js，那么就用document._currentScript來代替document.currentScript。下劃線用于填充currentScript屬性，因?yàn)椴皇撬械臑g覽器都支持這個(gè)屬性。

component.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

var  mainDoc  =  document ._currentScript.ownerDocument;   

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

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

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

例如，您要從導(dǎo)入文件中加載jQuery，如果每個(gè)引入文件都包含加載jQuery的script標(biāo)簽，則如果HTML主文件要依賴多個(gè)導(dǎo)入文件，而且引入文件中包含相同的庫，這時(shí)會(huì)怎樣呢？那么jQuery就會(huì)被加載兩次，并且也會(huì)被執(zhí)行兩次。

index.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

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

component1.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

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

component2.html HTML引入自動(dòng)幫你解決了這個(gè)問題。

以前面的代碼為例，通過將加載jQuery腳本標(biāo)簽的做法不同，HTML引入對(duì)已經(jīng)加載過的HTML文件進(jìn)行進(jìn)行，并通過加載jQuery的腳本標(biāo)簽打包成一個(gè)HTML導(dǎo)入文件，這樣jQuery就只被加載和執(zhí)行一次了。

而是還有一個(gè)問題：我們?cè)黾恿艘粋€(gè)要加載的文件。怎么處理多個(gè)擴(kuò)展的文件呢？幸運(yùn)的是，我們有一個(gè)叫vulcanize的工具來解決這個(gè)問題。合并網(wǎng)絡(luò)請(qǐng)求

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

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

復(fù)制代碼

代碼如下：

$ vulcanize -o vulcanized.html index.html

通過執(zhí)行這個(gè)命令，index.html中的依賴會(huì)被解析，并且會(huì)產(chǎn)生一個(gè)合并的HTML文件，插入vulcanized.html。學(xué)習(xí)更多有關(guān)vulcanize的知識(shí)，請(qǐng)看這兒。

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

你之前可能沒有看過這些文章，我先解釋一下：Template可以讓你用聲明的方式定義你的自定義元素的內(nèi)容。ShadowDOM可以讓一個(gè)元素的樣式，ID，類只作用到其本身。自定義元素可以讓你自定義HTML標(biāo)簽。通過把這些跟HTML引入結(jié)合起來，你自定義的網(wǎng)絡(luò)組件會(huì)變?yōu)樘娲?，具有重疊性。任何人添加一個(gè)Link標(biāo)簽就可以使用它。

x-component.html

XML / HTML代碼將內(nèi)容復(fù)制到文本

< template id = “ template” >   

  <樣式>  

    ...   

  </ style >  

  < div id = “容器” >   

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

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

  </ div >  

</模板>  

<腳本>  

  //此元素將被注冊(cè)到index.html   

  //因?yàn)閌document`在這里是index.html中的那個(gè)   

  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代碼將內(nèi)容復(fù)制到文本

...   

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

</頭>  

<身體>  

  < x分量>  

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

  </ x-component >  

  ...  

注意，因?yàn)閄-component.html中的文檔對(duì)象跟的index.html的一樣，你沒必要再寫一些棘手的代碼，它會(huì)自動(dòng)為你注冊(cè)。支持的瀏覽器

Chrome和Opera提供對(duì)HTML導(dǎo)入的支持，F(xiàn)irefox要在2014年12月后才支持（Mozilla表示Firefox不計(jì)劃在最初提供對(duì)HTML導(dǎo)入的支持，并需要首先了解ES6的模塊是如何實(shí)現(xiàn)的）。

您可以去chromestatus.com或caniuse.com查詢?yōu)g覽器是否支持HTML導(dǎo)入。想要在其他瀏覽器上使用HTML導(dǎo)入，可以使用webcomponents.js（原名platform.js）。

到此，相信大家對(duì)“HTML5中怎么導(dǎo)入文件”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！