Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to import files in HTML5". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to import files in HTML5.

Template,Shadow DOM and Custom Elements make it easier than ever to create UI components. But resources like HTML,CSS,JavaScript still need to be loaded one by one, which is very inefficient.

For example, loading jQuery UI or Bootstrap now requires adding separate tags for JavaScript,CSS and Web fonts. If your Web component applies multiple dependencies, things get more complicated.

The HTML import lets you load these resources as a merged HTML file. Import using HTML

To load a HTML file, you need to add a link tag whose related attribute is that the import,herf attribute is the path to the HTML file. For example, if you want to load component.html into index.html:

Index.html

XML / HTML code copies content to text

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

You can import files into HTML (translator's note: here "imported HTML" is translated into "HTML import file" and "original HTML" is translated into "HTML master file". For example, index.html is the HTML master file and component.html is the HTML import file. ) add any resources, including scripts, stylesheets, and fonts, just like adding resources to a normal HTML.

Component.html

XML / HTML code copies content to text

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

Doctype,html,head,body these tags are not required. The HTML import loads the document to be brought in immediately, parses the resources in the document, and executes them immediately if there is a script. Execution sequence

The way browsers parse HTML documents is linear, which means that the script at the top of the HTML is executed before the bottom. Also, browsers usually wait until the JavaScript code is executed before parsing the rest of the code.

To keep the script from compressing HTML rendering, you can add an async or Defer attribute to the tag (or you can put the script tag at the bottom of the page). The defer attribute repeats the execution of the script until all page parsing is complete. The async property lets the browser initialize the script so that it does not prevent HTML from rendering. So how does HTML import work?

The script in the HTML import file is the same as including the defer attribute. For example, in the following example, index.html executes script1.js and script2.js before script3.js.

Index.html

XML / HTML code copies content to text

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

/ / 1 .

< title >

Import exampl

< script src = " script3.js" >

/ / 4 .

Component.html

XML / HTML code copies content to text

< script src = " js / script1.js" >

/ / 2 .

< script src = " js / script2.js" >

/ / 3 .

1. Load component.html in index.html and wait for execution

two。 Execute script1.js in component.html

3. Execute script2.js in component.html after script1.js execution

4. Execute script2.js and then execute script3.js in index.html

Note that if you add an asynchronous attribute to link [rel = "import"], the HTML import treats it as if it were a script containing asynchronous attributes. It does not wait for the HTML import file to execute and load, which means that the HTML import does not prevent the rendering of the HTML master file. This also makes it possible to improve the performance of the site, unless there are other scripts that rely on the execution of HTML incoming files. Cross-domain introduction

Fundamentally speaking, the introduction of HTML cannot import resources from other domain names.

For example, you cannot import HTML files from http://webcomponents.org/ to http://example.com/. To get around this limitation, you can use CORS (cross-domain resource sharing). To learn more about CORS, please read this article. HTML imports windows and document objects in a file

As I mentioned earlier, the scripts in the HTML file will be executed, but this does not mean that the tags introduced into the HTML file will also be rendered by the browser. You need to write some JavaScript code to help.

When using JavaScript in an HTML import file, one thing to be aware of is that the document objects in the HTML import file actually refer to the document objects in the HTML main file. Take the previous code as an example, index.html and components. Documents in html refer to document objects in index.html. How can I import a document in a file using HTML? You can link to the import properties in.

Index.html

XML / HTML code copies content to text

Var link = document .querySelector ('link [rel = "import"]')

Link.addEventListener ('load',function (e) {

Var importedDoc = link .import

/ / importedDoc points to the document under component.html

})

To get the document objects in component.html, you use document.currentScript.ownerDocument.

Component.html

XML / HTML code copies content to text

Var mainDoc = document .currentScript.ownerDocument

/ / mainDoc points to the document under component.html

If you are using webcomponents.js, use document._currentScript instead of document.currentScript. The underscore is used to populate the currentScript attribute, because not all browsers support it.

Component.html

XML / HTML code copies content to text

Var mainDoc = document. _ currentScript.ownerDocument

/ / mainDoc points to the document under component.html

By adding the following code at the beginning of the script, you can easily access document objects in component.html, regardless of whether the browser supports HTML import or not. Document._currentScript = document._currentScript | | document.currentScript; performance considerations

One of the benefits introduced with HTML is the ability to organize resources, but it also means that when they are loaded, they become too large due to the use of some additional HTML files. There are several points to consider: parsing dependencies

For example, if you want to load jQuery from an import file, what if each incoming file contains a script tag that loads jQuery, and what happens if the HTML master file depends on multiple import files and the incoming file contains the same library? Then the jQuery will be loaded twice and executed twice.

Index.html

XML / HTML code copies content to text

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

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

Component1.html

XML / HTML code copies content to text

The introduction of component2.html HTML automation helps you solve this problem.

Taking the previous code as an example, by loading jQuery script tags differently, HTML is introduced to load HTML files that have already been loaded, and by loading jQuery script tags into a HTML import file, so that jQuery is loaded and executed only once.

But there is another problem: we have added a file to load. How to deal with multiple extended files? Fortunately, we have a tool called vulcanize to solve this problem. Merge network requests

Vulcanize can combine multiple HTML files into a single file, thus reducing the number of network connections. You can install it through npm and use the command line to use it. You may use both grunt and gulp to host some tasks, so you can use vulcanize as part of the build process.

To resolve dependencies and merge incoming files in index.html, use the following command:

Copy the code

The code is as follows:

$vulcanize-o vulcanized.html index.html

By executing this command, the dependencies in index.html are resolved and a merged HTML file is generated and inserted into vulcanized.html. To learn more about vulcanize, please see here.

Note: http2's server push function is considered as a link and merge to delete files later. Combine Template,Shadow DOM, custom elements and HTML introduction

You may not have read these articles before, let me explain: Template allows you to define the contents of your custom elements declaratively. ShadowDOM allows the style of an element, ID, to work only on itself. Custom elements allow you to customize HTML tags. By combining these with the introduction of HTML, your custom network components will become alternative and overlapping. Anyone who adds a Link tag can use it.

X-component.html

XML / HTML code copies content to text

< template id = " template" >

...

< div id = "容器" >

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

< content select = " h2" >

/ / this element will be registered with index.html

/ / because `document` here is the one in index.html

Var XComponent = document .registerElement ('xmuri registerElement, {

Prototype: Object.create (HTMLElement.prototype, {

CreatedCallback: {

Value: function () {

Var root = this .createShadowRoot ()

Var template = document .querySelector ('# template')

Var clone = document .importNode (template.content,true)

Root.appendChild (clone)

}

}

})

})

Index.html

XML / HTML code copies content to text

...

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

< x分量>

< h2 >

This is a custom element

...

Note that because the document objects in X-component.html are the same as those in index.html, you don't have to write any more tricky code, it will automatically register for you. Supported browsers

Chrome and Opera provide support for HTML import, while Firefox will not support it until December 2014. (Mozilla said that Firefox does not plan to provide support for HTML import initially, and needs to understand how the ES6 module is implemented first.)

You can go to chromestatus.com or caniuse.com to find out whether the browser supports HTML import. If you want to use HTML import on other browsers, you can use webcomponents.js (formerly platform.js).

At this point, I believe you have a deeper understanding of "how to import files in HTML5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.