澳门在线威尼斯官方 > 威尼斯澳门在线 > 简单介绍HTML5中的文件导入

原标题:简单介绍HTML5中的文件导入

浏览次数:127 时间:2019-10-22

HTML imports 入门

2015/02/10 · HTML5 · HTML, imports

本文由 伯乐在线 - XfLoops 翻译,周进林 校稿。未经许可,防止转载!
波兰语出处:webcomponents.org。招待出席翻译组。

Template、Shadow DOM及Custom Elements 让您创建UI组件比原先更易于了。但是像HTML、CSS、JavaScript这样的能源照旧须求多个个地去加载,这是很没成效的。

去除重复依赖也并不轻巧。比如,今后加载jQuery UI或Bootstrap就要求为JavaScript、CSS及Web Fonts增多单独的价签。假使您的Web 组件应用了多元的依赖,那事情就变得越来越复杂。

HTML 导入令你以叁个合併的HTML文件来加载这几个财富。

粗略介绍HTML5中的文件导入,

那篇作品主要介绍了简短介绍HTML中的文件导入,包罗加载jQuery、导入后的推行种种等知识点,须要的爱侣能够参谋下

Template、Shadow DOM及Custom Elements 让您创立UI组件比原先更便于了。可是像HTML、CSS、JavaScript那样的财富照旧供给一个个地去加载,那是很没功能的。

去除重复信赖也并不简单。举个例子,将来加载jQuery UI或Bootstrap就必要为JavaScript、CSS及Web Fonts增添单独的价签。借使您的Web 组件应用了不计其数的依据,这事情就变得越发复杂。

HTML 导入令你以一个统旭日初升的HTML文件来加载那个能源。
使用HTML导入

为加载八个HTML文件,你要求充实一个link标签,其rel属性为import,herf属性是HTML文件的路径。比如,借让你想把component.html加载到index.html:

index.html  

XML/HTML Code复制内容到剪贴板

  1. <link rel="import" href="component.html" >    

你可现在HTML导入文本(译者注:本文将“ the imported HTML”译为“HTML导入文本”,将“the original HTML”译为“HTML主文件”。举例,index.html是HTML主文件,component.html是HTML导入文本。)加多此外的能源,包括剧本、样式表及字体,就跟往普通的HTML增加能源均等。

component.html  

XML/HTML Code复制内容到剪贴板

  1. <link rel="stylesheet" href="css/style.css">  
  2. <script src="js/script.js"></script>  

doctype、html、 head、 body这一个标签是不须求的。HTML 导入会立刻加载要导入的文书档案,解析文书档案中的能源,固然有脚本的话也会及时实践它们。
实践各类

浏览器分析HTML文书档案的办法是线性的,这正是说HTML顶上部分的script会比尾部先进行。而且,浏览器平时会等到JavaScript代码实行完成后,才会随着剖析前面包车型大巴代码。

为了不让script 妨碍HTML的渲染,你能够在标签中增多async或defer属性(或然您也能够将script 标签放到页面包车型地铁最底层)。defer 属性会延迟脚本的实施,直到整个页面剖析实现。async 属性让浏览器异步地实行脚本,进而不会妨碍HTML的渲染。那么,HTML 导入是何许职业的呢?

HTML导入文本中的脚本就跟含有defer属性一样。比方在底下的演示中,index.html会先实行script1.js和script2.js ,然后再进行script3.js。

index.html  

XML/HTML Code复制内容到剪贴板

  1. <link rel="import" href="component.html"> // 1.   
  2. <title>Import Example</title>  
  3. <script src="script3.js"></script>        // 4.  

component.html  

XML/HTML Code复制内容到剪贴板

  1. <script src="js/script1.js"></script>     // 2.   
  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"]加多async属性,HTML导入会把它看做含有async属性的脚本来对待。它不会等待HTML导入文本的执行和加载,那意味HTML 导入不会妨碍HTML主文件的渲染。那也给提拔网址质量带来了说不定,除非有任何的本子信任于HTML导入文本的举行。
跨域导入

从根本上说,HTML导入是不可能从别的的域著名出品人入能源的。

举个例子,你不能够从 导入HTML 文件。为了绕过那一个范围,能够使用CO奇骏S(跨域财富分享)。想驾驭CO猎豹CS6S,请看那篇小说。
HTML导入文本中的window和document对象

日前笔者提过在导入HTML文件的时候里面包车型地铁脚本是会被实践的,但那并不表示HTML导入文本中的标签也会被浏览器渲染。你必要写一些JavaScript代码来帮助。

当在HTML导入文本中运用JavaScript时,有一点点要严防的是,HTML导入文本中的document对象实际指的是HTML主文件中的document对象。从前面包车型大巴代码为例,index.html和  component.html 的document都以指index.html的document对象。怎么工夫应用HTML导入文本中的document 呢?依赖link中的import 属性。

index.html  

XML/HTML Code复制内容到剪贴板

  1. var link = document.querySelector('link[rel="import"]');   
  2. link.addEventListener('load', function(e) {   
  3.   var importedDoc = link.import;   
  4.   // importedDoc points to the document under component.html   
  5. });  

为了获得component.html中的document 对象,要使用document.currentScript.ownerDocument.

component.html  

XML/HTML Code复制内容到剪贴板

  1. var mainDoc = document.currentScript.ownerDocument;   
  2. // mainDoc points to the document under component.html  

设若你在用webcomponents.js,那么就用document._currentScript来替代document.currentScript。下划线用于填充currentScript属性,因为并非独具的浏览器都帮助那个性情。

component.html

 

XML/HTML Code复制内容到剪贴板

  1. var mainDoc = document._currentScript.ownerDocument;   
  2. // mainDoc points to the document under component.html   

透过在剧本起先增添下边包车型地铁代码,你就足以轻松地拜望component.html中的document对象,而不用管浏览器是还是不是永葆HTML导入。

document._currentScript = document._currentScript || document.currentScript;
属性方面的虚拟

选拔HTML 导入的二个好处是能够将能源公司起来,不过也象征在加载那个财富的时候,由于接收了风姿浪漫部分附加的HTML文件而让尾部变得过大。有几点是内需考虑的:
浅析重视

只要HTML主文件要正视八个导入文本,并且导入文本中富含同样的库,那时会怎么样呢?举例,你要从导入文本中加载jQuery,假若每种导入文本都包罗加载jQuery的script标签,那么jQuery就能被加载五遍,何况也会被实行四次。

index.html  

XML/HTML Code复制内容到剪贴板

  1. <link rel="import" href="component1.html">  
  2. <link rel="import" href="component2.html">  

component1.html  

XML/HTML Code复制内容到剪贴板

  1. <script src="js/jquery.js"></script>  

component2.html
 
HTML导入自动帮您化解了那些主题材料。

与加载一次script标签的做法不朝气蓬勃,HTML 导入对曾经加载过的HTML文件不再实行加载和进行。从前边的代码为例,通过将加载jQuery的script标签打包成一个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导入结合起来

让大家对那个小说体系的代码应用HTML导入。你前边恐怕未有看过那么些文章,作者先解释一下:Template可以让您用注解的措施定义你的自定义成分的内容。Shadow DOM能够让贰个因素的style、ID、class只效劳到其本身。自定义成分得以令你自定义HTML标签。通过把那几个跟HTML导入结合起来,你自定义的web 组件会变得模块化,具备复用性。任何人增添贰个Link标签就足以应用它。

x-component.html

 

XML/HTML Code复制内容到剪贴板

  1. <template id="template">  
  2.   <style>  
  3.     ...   
  4.   </style>  
  5.   <div id="container">  
  6.     <img src=";  
  7.     <content select="h1"></content>  
  8.   </div>  
  9. </template>  
  10. <script>  
  11.   // This element will be registered to index.html   
  12.   // Because `document` here means the one in index.html   
  13.   var XComponent = document.registerElement('x-component', {   
  14.     prototype: Object.create(HTMLElement.prototype, {   
  15.       createdCallback: {   
  16.         value: function() {   
  17.           var root = this.createShadowRoot();   
  18.           var template = document.querySelector('#template');   
  19.           var clone = document.importNode(template.content, true);   
  20.           root.appendChild(clone);   
  21.         }   
  22.       }   
  23.     })   
  24.   });   
  25. </script>  

index.html  

XML/HTML Code复制内容到剪贴板

  1. ...   
  2.   <link rel="import" href="x-component.html">  
  3. </head>  
  4. <body>  
  5.   <x-component>  
  6.     <h1>This is Custom Element</h1>  
  7.   </x-component>  
  8.   ...  

在乎,因为x-component.html 中的document 对象跟index.html的一样,你没要求再写一些疑难的代码,它会活动为您注册。
支撑的浏览器

Chrome 和 Opera提供对HTML导入的支撑,Firefox要在二零一五年二月后才支撑(Mozilla表示Firefox不铺排在近年提供对HTML导入的支撑,声称须要首先精通ES6的模块是怎样实现的)。

你能够去chromestatus.com或caniuse.com查询浏览器是还是不是协助HTML导入。想要在别的浏览器上利用HTML导入,能够用webcomponents.js(原名platform.js)。
连锁财富

HTML导入就介绍这么多了。如若您想学越多关于HTML导入的文化,请前往:

    HTML Imports: #include for the web – HTML5Rocks
    HTML Imports spec

 

那篇文章首要介绍了简约介绍HTML中的文件导入,蕴含加载jQuery、导入后的实施各类等知识点,须求的爱人能够参...

使用HTML导入

为加载三个HTML文件,你必要追加三个link标签,其rel属性为import,herf属性是HTML文件的不二诀要。比如,要是你想把component.html加载到index.html:

index.html

XHTML

<link rel="import" href="component.html" >

1
<link rel="import" href="component.html" >

您可现在HTML导入文本(译者注:本文将“ the imported HTML”译为“HTML导入文本”,将“the original HTML”译为“HTML主文件”。比方,index.html是HTML主文件,component.html是HTML导入文本。)加多任何的能源,富含剧本、样式表及字体,就跟往普通的HTML增加财富均等。

component.html

XHTML

<link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>

1
2
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

doctype、html、 head、 body那个标签是不须求的。HTML 导入会立即加载要导入的文书档案,解析文书档案中的财富,假诺有脚本的话也会马上实施它们。

推行各种

浏览器剖析HTML文书档案的不二诀如若线性的,那正是说HTML最上端的script会比尾部先实践。並且,浏览器平时会等到JavaScript代码施行完结后,才会随之分析后边的代码。

为了不让script 妨碍HTML的渲染,你能够在标签中增加async或defer属性(只怕你也得以将script 标签放到页面包车型大巴底层)。defer 属性会延迟脚本的实施,直到后生可畏切页面剖判实现。async 属性让浏览器异步地奉行脚本,进而不会妨碍HTML的渲染。那么,HTML 导入是什么专业的吗?

HTML导入文本中的脚本就跟含有defer属性同样。举个例子在下边包车型大巴现身说法中,index.html会先实施script1.js和script2.js ,然后再实行script3.js。

index.html

XHTML

<link rel="import" href="component.html"> // 1. <title>Import Example</title> <script src="script3.js"></script> // 4.

1
2
3
<link rel="import" href="component.html"> // 1.
<title>Import Example</title>
<script src="script3.js"></script>        // 4.

component.html

XHTML

<script src="js/script1.js"></script> // 2. <script src="js/script2.js"></script> // 3.

1
2
<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”]增多async属性,HTML导入会把它作为含有async属性的脚本来对待。它不会等待HTML导入文本的推行和加载,这象征HTML 导入不会妨碍HTML主文件的渲染。这也给晋升网址品质带来了或者,除非有别的的脚本信任于HTML导入文本的试行。

威尼斯澳门在线 ,跨域导入

从根本上说,HTML导入是不可能从其余的域名导入财富的。

诸如,你不能够从向  导入HTML 文件。为了绕过这么些范围,能够接纳CO如虎 CTR 3S(跨域财富分享)。想了然CO昂CoraS,请看那篇作品。

HTML导入文本中的window和document对象

前面作者提过在导入HTML文件的时候里面包车型大巴脚本是会被实施的,但那并不代表HTML导入文本中的标签也会被浏览器渲染。你必要写一些JavaScript代码来帮衬。

当在HTML导入文本中行使JavaScript时,有点要有备无患的是,HTML导入文本中的document对象实际指的是HTML主文件中的document对象。此前边的代码为例,index.html和  component.html 的document都以指index.html的document对象。怎么才具使用HTML导入文本中的document 呢?依靠link中的import 属性。

index.html

XHTML

var link = document.querySelector('link[rel="import"]'); link.addEventListener('load', function(e) { var importedDoc = link.import; // importedDoc points to the document under component.html });

1
2
3
4
5
var link = document.querySelector('link[rel="import"]');
link.addEventListener('load', function(e) {
  var importedDoc = link.import;
  // importedDoc points to the document under component.html
});

为了博取component.html中的document 对象,要采用document.currentScript.ownerDocument.

component.html

XHTML

var mainDoc = document.currentScript.ownerDocument; // mainDoc points to the document under component.html

1
2
var mainDoc = document.currentScript.ownerDocument;
// mainDoc points to the document under component.html

借使您在用webcomponents.js,那么就用document._currentScript来代替document.currentScript。下划线用于填充currentScript属性,因为并非装有的浏览器都支持那几个天性。

component.html

XHTML

var mainDoc = document._currentScript.ownerDocument; // mainDoc points to the document under component.html

1
2
var mainDoc = document._currentScript.ownerDocument;
// mainDoc points to the document under component.html

透过在剧本初始增加下边包车型大巴代码,你就足以轻便地寻访component.html中的document对象,而不用管浏览器是否辅助HTML导入。

XHTML

document._currentScript = document._currentScript || document.currentScript;

1
document._currentScript = document._currentScript || document.currentScript;

脾性方面包车型大巴考虑

选取HTML 导入的三个好处是能够将能源公司起来,然则也象征在加载那几个财富的时候,由于接收了黄金年代部分附加的HTML文件而让底部变得过大。有几点是内需想念的:

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:简单介绍HTML5中的文件导入

关键词:

上一篇:采纳HTML5中的Canvas绘制一张笑貌的学科,Canvas画一

下一篇:没有了