Chúng tôi có thể nhập một tệp HTML vào một tệp khác không?

Question

Hãy suy nghĩ về cách bạn tải các loại tài nguyên khác nhau trên web. Đối với JS, chúng tôi có

<head>
    <link rel="import" href="bootstrap.html">
head>

3. Đối với CSS, mục tiêu của bạn có thể là

<head>
    <link rel="import" href="bootstrap.html">
head>

4. Đối với hình ảnh, đó là

<head>
    <link rel="import" href="bootstrap.html">
head>

5. Video có

<head>
    <link rel="import" href="bootstrap.html">
head>

6. Âm thanh,

<head>
    <link rel="import" href="bootstrap.html">
head>

7… Đi thẳng vào vấn đề. Phần lớn nội dung của trang web có cách tự tải đơn giản và có tính khai báo. Không phải như vậy đối với HTML. Đây là lựa chọn của bạn

Nội dung chính Show

Bắt đầu #
Những thứ cơ bản #
Phát hiện và hỗ trợ tính năng #
Đóng gói tài nguyên #
Sự kiện tải/lỗi #
Sử dụng nội dung #
liên kết. nhập khẩu #
Viết kịch bản trong nhập khẩu #
Cung cấp các thành phần web #
Bao gồm các mẫu #
Đăng ký các yếu tố tùy chỉnh #
Quản lý phụ thuộc và nhập phụ #
Cân nhắc hiệu suất #
Nhập khẩu nối #
Nhập tận dụng bộ nhớ đệm của trình duyệt #
Nội dung chỉ hữu ích khi bạn thêm nó #
Tối ưu hóa cho tải không đồng bộ #
Những điều cần ghi nhớ #
Sự kết luận #
Trường hợp sử dụng #
Đóng góp
Nội dung liên quan
Liên kết
Tôi có thể đưa một tệp HTML vào một tệp khác không?
Làm cách nào để kết hợp hai tệp HTML thành một?
Có thể nhập HTML không?

```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
8 - đã thử và đúng nhưng sức nặng. Nội dung của iframe tồn tại hoàn toàn trong ngữ cảnh riêng biệt so với trang của bạn. Mặc dù đó chủ yếu là một tính năng tuyệt vời, nhưng nó tạo ra những thách thức bổ sung (thu nhỏ kích thước của khung hình với nội dung của nó là điều khó khăn, cực kỳ khó chịu khi nhập/xuất tập lệnh, gần như không thể tạo kiểu)

AJAX - Tôi thích
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
9, nhưng bạn đang nói rằng tôi cần JS để tải HTML?

CrazyHacks™ - nhúng trong chuỗi, ẩn dưới dạng nhận xét (e. g.

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

0). kinh quá

Thấy sự trớ trêu? . May mắn thay, các Thành phần web ở đây để giúp chúng tôi trở lại đúng hướng

Bắt đầu #

Nhập HTML, một phần của quá trình truyền Cấu phần Web, là một cách để đưa tài liệu HTML vào các tài liệu HTML khác. Bạn cũng không bị giới hạn trong đánh dấu. Một lần nhập cũng có thể bao gồm CSS, JavaScript hoặc bất kỳ thứ gì khác mà tệp

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

1 có thể chứa. Nói cách khác, điều này làm cho quá trình nhập trở thành một công cụ tuyệt vời để tải HTML/CSS/JS có liên quan

Những thứ cơ bản #

Bao gồm một lần nhập trên trang của bạn bằng cách khai báo một

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

2

<head>
    <link rel="import" href="bootstrap.html">
head>

0

URL của lần nhập được gọi là vị trí nhập. Để tải nội dung từ miền khác, vị trí nhập cần được bật CORS

<head>
    <link rel="import" href="bootstrap.html">
head>

1

Ngăn xếp mạng của trình duyệt tự động loại bỏ tất cả các yêu cầu từ cùng một URL. Điều này có nghĩa là các lần nhập tham chiếu cùng một URL chỉ được truy xuất một lần. Bất kể bao nhiêu lần nhập tại cùng một vị trí được tải, nó chỉ thực hiện một lần

Phát hiện và hỗ trợ tính năng #

Để phát hiện hỗ trợ, hãy kiểm tra xem có tồn tại

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

3 trên phần tử

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

4 không

<head>
    <link rel="import" href="bootstrap.html">
head>

4

Hỗ trợ trình duyệt vẫn còn trong những ngày đầu. Chrome 31 là trình duyệt đầu tiên được triển khai nhưng các nhà cung cấp trình duyệt khác đang chờ xem Mô-đun ES hoạt động như thế nào. Tuy nhiên, đối với các trình duyệt khác, các thành phần web. js polyfill hoạt động tốt cho đến khi mọi thứ được hỗ trợ rộng rãi

Đóng gói tài nguyên #

Các lần nhập cung cấp quy ước để gộp HTML/CSS/JS (thậm chí cả các lần Nhập HTML khác) vào một lần phân phối duy nhất. Đó là một tính năng nội tại, nhưng là một tính năng mạnh mẽ. Nếu bạn đang tạo một chủ đề, thư viện hoặc chỉ muốn phân đoạn ứng dụng của mình thành các phần hợp lý, thì việc cung cấp cho người dùng một URL duy nhất là rất hấp dẫn. Rất tiếc, bạn thậm chí có thể phân phối toàn bộ ứng dụng thông qua một lần nhập. Hãy suy nghĩ về điều đó trong một giây

Chỉ sử dụng một URL, bạn có thể đóng gói một gói web tốt có thể định vị lại để người khác sử dụng

Một ví dụ thực tế là Bootstrap. Bootstrap bao gồm các tệp riêng lẻ (bootstrap. css, khởi động. js, phông chữ), yêu cầu JQuery cho các plugin của nó và cung cấp các ví dụ đánh dấu. Các nhà phát triển thích sự linh hoạt gọi món. Nó cho phép họ mua vào các phần của khuôn khổ mà họ muốn sử dụng. Điều đó nói rằng, tôi cá là JoeDeveloper™ điển hình của bạn sẽ đi theo con đường dễ dàng và tải xuống tất cả Bootstrap

Nhập khẩu có ý nghĩa rất lớn đối với những thứ như Bootstrap. Tôi giới thiệu với bạn, tương lai của việc tải Bootstrap

<head>
    <link rel="import" href="bootstrap.html">
head>

Người dùng chỉ cần tải một liên kết Nhập khẩu HTML. Họ không cần phải loay hoay với các tập tin bị phân tán. Thay vào đó, toàn bộ Bootstrap được quản lý và gói gọn trong một lần nhập, bootstrap. html

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

Hãy để điều này ngồi. Đó là thứ thú vị

Sự kiện tải/lỗi #

Phần tử

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

4 kích hoạt sự kiện

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

6 khi quá trình nhập được tải thành công và

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

7 khi lần thử không thành công (e. g. nếu tài nguyên 404s)

Nhập cố gắng tải ngay lập tức. Một cách dễ dàng để tránh đau đầu là sử dụng các thuộc tính

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

8/

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

7

<head>
    <link rel="import" href="bootstrap.html">
head>

2

Lưu ý rằng các trình xử lý sự kiện được xác định trước khi quá trình nhập được tải trên trang. Trình duyệt cố tải nội dung nhập ngay khi gặp thẻ. Nếu chức năng chưa tồn tại, bạn sẽ gặp lỗi bảng điều khiển đối với tên chức năng không xác định

Hoặc, nếu bạn đang tạo động nhập

<head>
    <link rel="import" href="bootstrap.html">
head>

3

Sử dụng nội dung #

Bao gồm một lần nhập trên một trang không có nghĩa là "đặt nội dung của tệp đó vào đây". Nó có nghĩa là "trình phân tích cú pháp, hãy tắt tìm nạp tài liệu này để tôi có thể sử dụng nó". Để thực sự sử dụng nội dung, bạn phải hành động và viết kịch bản

Một thời điểm quan trọng của

<head>
    <link rel="import" href="bootstrap.html">
head>

20 là nhận ra rằng một lần nhập chỉ là một tài liệu. Thực chất nội dung của một lần nhập khẩu được gọi là chứng từ nhập khẩu. Bạn có thể điều khiển quá trình nhập bằng cách sử dụng API DOM tiêu chuẩn

liên kết. nhập khẩu #

Để truy cập nội dung của một lần nhập, hãy sử dụng thuộc tính

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

3 của phần tử liên kết

<head>
    <link rel="import" href="bootstrap.html">
head>

6

<head>
    <link rel="import" href="bootstrap.html">
head>

22 là

<head>
    <link rel="import" href="bootstrap.html">
head>

23 trong các điều kiện sau

Trình duyệt không hỗ trợ Nhập HTML

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

4 không có

<head>
    <link rel="import" href="bootstrap.html">
head>

25

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

4 chưa được thêm vào DOM

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

4 đã bị xóa khỏi DOM

Tài nguyên không được kích hoạt CORS

ví dụ đầy đủ

Giả sử

<head>
    <link rel="import" href="bootstrap.html">
head>

28 chứa

<head>
    <link rel="import" href="bootstrap.html">
head>

4

Nhà nhập khẩu có thể lấy một phần cụ thể của tài liệu này và sao chép nó vào trang của họ

<head>
    <link rel="import" href="bootstrap.html">
head>

5

Viết kịch bản trong nhập khẩu #

Nhập khẩu không có trong tài liệu chính. Họ là vệ tinh của nó. Tuy nhiên, quá trình nhập của bạn vẫn có thể hoạt động trên trang chính mặc dù tài liệu chính chiếm vị trí tối cao. Một lần nhập có thể truy cập DOM của chính nó và/hoặc DOM của trang đang nhập nó

Ví dụ - nhập khẩu. html thêm một trong các biểu định kiểu của nó vào trang chính

<head>
    <link rel="import" href="bootstrap.html">
head>

10

Chú ý những gì đang xảy ra ở đây. Tập lệnh bên trong phần nhập tham chiếu đến tài liệu đã nhập (

<head>
    <link rel="import" href="bootstrap.html">
head>

29) và nối một phần của tài liệu đó vào trang nhập (

<head>
    <link rel="import" href="bootstrap.html">
head>

30). Khá sởn gai ốc nếu bạn hỏi tôi

Tập lệnh trong quá trình nhập có thể thực thi mã trực tiếp hoặc xác định các chức năng sẽ được trang nhập sử dụng. Điều này tương tự như cách các mô-đun được định nghĩa trong Python

Quy tắc JavaScript trong một lần nhập

Tập lệnh trong quá trình nhập được thực thi trong ngữ cảnh của cửa sổ chứa
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
31 đang nhập. Vì vậy,
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
32 đề cập đến tài liệu trang chính. Điều này có hai hệ quả hữu ích
- các hàm được xác định trong một lần nhập kết thúc vào ngày
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
  33
- bạn không cần phải làm bất cứ điều gì điên rồ như thêm các khối
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
  34 của quá trình nhập vào trang chính. Một lần nữa, tập lệnh được thực thi
Nhập khẩu không chặn phân tích cú pháp của trang chính. Tuy nhiên, các tập lệnh bên trong chúng được xử lý theo thứ tự. Điều này có nghĩa là bạn có hành vi giống như trì hoãn trong khi duy trì thứ tự tập lệnh phù hợp. Thêm về điều này dưới đây

Cung cấp các thành phần web #

Thiết kế của Nhập khẩu HTML rất phù hợp để tải nội dung có thể sử dụng lại trên web. Đặc biệt, đó là một cách lý tưởng để phân phối các Thành phần Web. Mọi thứ từ các

<head>
    <link rel="import" href="bootstrap.html">
head>

35 HTML cơ bản đến các Phần tử tùy chỉnh hoàn chỉnh với Shadow DOM [1, 2, 3]. Khi các công nghệ này được sử dụng song song, quá trình nhập sẽ trở thành một

<head>
    <link rel="import" href="bootstrap.html">
head>

36 cho Thành phần Web

Bao gồm các mẫu #

Phần tử Mẫu HTML phù hợp tự nhiên cho Nhập khẩu HTML.

<head>
    <link rel="import" href="bootstrap.html">
head>

35 rất lý tưởng để dàn dựng các phần đánh dấu để ứng dụng nhập sử dụng theo ý muốn. Đóng gói nội dung trong một

<head>
    <link rel="import" href="bootstrap.html">
head>

35 cũng mang lại cho bạn lợi ích bổ sung là làm cho nội dung trở nên trơ cho đến khi được sử dụng. Nghĩa là, các tập lệnh không chạy cho đến khi mẫu được thêm vào DOM). bùng nổ

<head>
    <link rel="import" href="bootstrap.html">
head>

11

<head>
    <link rel="import" href="bootstrap.html">
head>

12

Đăng ký các yếu tố tùy chỉnh #

Phần tử tùy chỉnh là một công nghệ Thành phần web khác hoạt động rất tốt với Nhập khẩu HTML. Quá trình nhập có thể thực thi tập lệnh, vậy tại sao không xác định + đăng ký các phần tử tùy chỉnh của bạn để người dùng không phải thực hiện?

<head>
    <link rel="import" href="bootstrap.html">
head>

13

Quá trình nhập này xác định (và đăng ký) hai phần tử,

<head>
    <link rel="import" href="bootstrap.html">
head>

39 và

<head>
    <link rel="import" href="bootstrap.html">
head>

60. Phần đầu tiên hiển thị một phần tử tùy chỉnh cơ bản tự đăng ký bên trong phần nhập. Ví dụ thứ hai cho thấy cách triển khai phần tử tùy chỉnh tạo Shadow DOM từ

<head>
    <link rel="import" href="bootstrap.html">
head>

35, sau đó tự đăng ký

Phần tốt nhất về việc đăng ký các phần tử tùy chỉnh trong quá trình nhập HTML là nhà nhập khẩu chỉ cần khai báo phần tử của bạn trên trang của họ. Không cần nối dây

<head>
    <link rel="import" href="bootstrap.html">
head>

14

Theo ý kiến của tôi, chỉ riêng quy trình công việc này đã khiến Nhập HTML trở thành một cách lý tưởng để chia sẻ Thành phần Web

Quản lý phụ thuộc và nhập phụ #

Yo dawg. Tôi nghe nói bạn thích nhập khẩu, vì vậy tôi đã thêm một lần nhập vào mục nhập của bạn

Nhập khẩu phụ #

Nó có thể hữu ích cho một lần nhập để bao gồm một lần nhập khác. Ví dụ: nếu bạn muốn sử dụng lại hoặc mở rộng thành phần khác, hãy sử dụng thao tác nhập để tải (các) thành phần khác

Dưới đây là một ví dụ thực tế từ Polymer. Đó là một thành phần tab mới (

<head>
    <link rel="import" href="bootstrap.html">
head>

62) sử dụng lại thành phần bố cục và bộ chọn. Các phần phụ thuộc được quản lý bằng cách sử dụng Nhập HTML

thẻ giấy. html (đơn giản hóa)

<head>
    <link rel="import" href="bootstrap.html">
head>

15

Các nhà phát triển ứng dụng có thể nhập phần tử mới này bằng cách sử dụng

<head>
    <link rel="import" href="bootstrap.html">
head>

16

Khi một

<head>
    <link rel="import" href="bootstrap.html">
head>

63 mới, tuyệt vời hơn xuất hiện trong tương lai, bạn có thể hoán đổi

<head>
    <link rel="import" href="bootstrap.html">
head>

64 và bắt đầu sử dụng ngay. Bạn sẽ không phá vỡ người dùng của mình nhờ nhập khẩu và các thành phần web

Quản lý phụ thuộc #

Chúng ta đều biết rằng việc tải JQuery nhiều lần trên mỗi trang sẽ gây ra lỗi. Đây không phải là một vấn đề lớn đối với Thành phần Web khi nhiều thành phần sử dụng cùng một thư viện sao? . Chúng có thể được sử dụng để quản lý các phụ thuộc

Bằng cách gói các thư viện trong Nhập HTML, bạn sẽ tự động loại bỏ các tài nguyên trùng lặp. Tài liệu chỉ được phân tích cú pháp một lần. Các tập lệnh chỉ được thực thi một lần. Ví dụ: giả sử bạn xác định một lần nhập, jquery. html, sẽ tải một bản sao của JQuery

<head>
    <link rel="import" href="bootstrap.html">
head>

17

Lần nhập này có thể được sử dụng lại trong các lần nhập tiếp theo như vậy

<head>
    <link rel="import" href="bootstrap.html">
head>

18

<head>
    <link rel="import" href="bootstrap.html">
head>

19

Ngay cả trang chính cũng có thể bao gồm jquery. html nếu nó cần thư viện

<head>
    <link rel="import" href="bootstrap.html">
head>

40

mặc dù jquery. html được bao gồm trong nhiều cây nhập khác nhau, tài liệu của nó chỉ được trình duyệt tìm nạp và xử lý một lần. Kiểm tra bảng điều khiển mạng chứng minh điều này

Chúng tôi có thể nhập một tệp HTML vào một tệp khác không?

jquery. html được yêu cầu một lần

Cân nhắc hiệu suất #

Nhập khẩu HTML hoàn toàn tuyệt vời nhưng cũng như với bất kỳ công nghệ web mới nào, bạn nên sử dụng chúng một cách khôn ngoan. Các phương pháp hay nhất về phát triển web vẫn đúng. Dưới đây là một số điều cần ghi nhớ

Nhập khẩu nối #

Giảm yêu cầu mạng luôn quan trọng. Nếu bạn có nhiều liên kết nhập cấp cao nhất, hãy cân nhắc kết hợp chúng thành một tài nguyên duy nhất và nhập tệp đó

Vulcanize là một công cụ xây dựng npm từ nhóm Polymer giúp làm phẳng đệ quy một tập hợp Nhập HTML thành một tệp duy nhất. Hãy nghĩ về nó như một bước xây dựng nối cho các Thành phần Web

Nhập tận dụng bộ nhớ đệm của trình duyệt #

Nhiều người quên rằng ngăn xếp mạng của trình duyệt đã được tinh chỉnh qua nhiều năm. Nhập (và nhập phụ) cũng tận dụng logic này. Quá trình nhập

<head>
    <link rel="import" href="bootstrap.html">
head>

65 có thể có các tài nguyên phụ nhưng chúng sẽ được lưu vào bộ đệm

Nội dung chỉ hữu ích khi bạn thêm nó #

Hãy coi nội dung là trơ cho đến khi bạn sử dụng các dịch vụ của nó. Lấy một biểu định kiểu bình thường, được tạo động

<head>
    <link rel="import" href="bootstrap.html">
head>

41

Trình duyệt sẽ không yêu cầu phong cách. css cho đến khi

<head>
    <link rel="import" href="bootstrap.html">
head>

66 được thêm vào DOM

<head>
    <link rel="import" href="bootstrap.html">
head>

42

Một ví dụ khác là đánh dấu được tạo động

<head>
    <link rel="import" href="bootstrap.html">
head>

43

<head>
    <link rel="import" href="bootstrap.html">
head>

67 tương đối vô nghĩa cho đến khi bạn thêm nó vào DOM

Khái niệm tương tự cũng đúng với tài liệu nhập khẩu. Trừ khi bạn thêm nội dung của nó vào DOM, nếu không thì đó là điều cấm kỵ. Trên thực tế, điều duy nhất "thực thi" trực tiếp trong tài liệu nhập khẩu là

<head>
    <link rel="import" href="bootstrap.html">
head>

34. Xem tập lệnh trong nhập khẩu

Tối ưu hóa cho tải không đồng bộ #

Nhập kết xuất khối #

Nhập kết xuất khối của trang chính. Điều này tương tự như những gì

<head>
    <link rel="import" href="bootstrap.html">
head>

4 làm. Lý do trình duyệt chặn hiển thị trên biểu định kiểu ngay từ đầu là để giảm thiểu FOUC. Các mục nhập hoạt động tương tự vì chúng có thể chứa các biểu định kiểu

Để hoàn toàn không đồng bộ và không chặn trình phân tích cú pháp hoặc hiển thị, hãy sử dụng thuộc tính

<head>
    <link rel="import" href="bootstrap.html">
head>

40

<head>
    <link rel="import" href="bootstrap.html">
head>

44

Lý do

<head>
    <link rel="import" href="bootstrap.html">
head>

40 không phải là mặc định cho Nhập HTML là vì nó yêu cầu các nhà phát triển thực hiện nhiều công việc hơn. Đồng bộ theo mặc định có nghĩa là Nhập HTML có định nghĩa phần tử tùy chỉnh bên trong chúng được đảm bảo tải và nâng cấp, theo thứ tự. Trong một thế giới hoàn toàn không đồng bộ, các nhà phát triển sẽ phải tự quản lý điệu nhảy đó và nâng cấp thời gian

Bạn cũng có thể tạo nhập không đồng bộ, động

<head>
    <link rel="import" href="bootstrap.html">
head>

45

Nhập khẩu không chặn phân tích cú pháp #

Nhập khẩu không chặn phân tích cú pháp của trang chính. Các tập lệnh bên trong quá trình nhập được xử lý theo thứ tự nhưng không chặn trang nhập. Điều này có nghĩa là bạn có hành vi giống như trì hoãn trong khi duy trì thứ tự tập lệnh phù hợp. Một lợi ích của việc đưa nội dung nhập của bạn vào

<head>
    <link rel="import" href="bootstrap.html">
head>

42 là nó cho phép trình phân tích cú pháp bắt đầu làm việc với nội dung càng sớm càng tốt. Như đã nói, điều quan trọng cần nhớ là

<head>
    <link rel="import" href="bootstrap.html">
head>

34 trong tài liệu chính vẫn tiếp tục chặn trang.

<head>
    <link rel="import" href="bootstrap.html">
head>

34 đầu tiên sau khi nhập sẽ chặn hiển thị trang. Đó là bởi vì một lần nhập có thể có tập lệnh bên trong cần được thực thi trước tập lệnh trong trang chính

<head>
    <link rel="import" href="bootstrap.html">
head>

46

Tùy thuộc vào cấu trúc ứng dụng và trường hợp sử dụng của bạn, có một số cách để tối ưu hóa hành vi không đồng bộ. Các kỹ thuật bên dưới giảm thiểu việc chặn kết xuất trang chính

Kịch bản #1 (ưu tiên). bạn không có tập lệnh trong

<head>
    <link rel="import" href="bootstrap.html">
head>

42 hoặc nội tuyến trong

<head>
    <link rel="import" href="bootstrap.html">
head>

46

Khuyến nghị của tôi để đặt

<head>
    <link rel="import" href="bootstrap.html">
head>

34 là tránh ngay sau khi bạn nhập. Di chuyển các tập lệnh càng muộn trong trò chơi càng tốt…nhưng bạn đã thực hiện cách tốt nhất đó rồi, KHÔNG PHẢI BẠN. ?

Đây là một ví dụ

<head>
    <link rel="import" href="bootstrap.html">
head>

47

Mọi thứ đều ở dưới cùng

cảnh 1. 5. việc nhập khẩu tự thêm vào

Một tùy chọn khác là yêu cầu nhập thêm nội dung của chính nó. Nếu tác giả nhập thiết lập hợp đồng để nhà phát triển ứng dụng tuân theo, thì quá trình nhập có thể tự thêm vào một khu vực của trang chính

<head>
    <link rel="import" href="bootstrap.html">
head>

48

<head>
    <link rel="import" href="bootstrap.html">
head>

49

Kịch bản #2. bạn có tập lệnh trong

<head>
    <link rel="import" href="bootstrap.html">
head>

42 hoặc nội tuyến trong

<head>
    <link rel="import" href="bootstrap.html">
head>

46

Nếu bạn có một lần nhập mất nhiều thời gian để tải, thì

<head>
    <link rel="import" href="bootstrap.html">
head>

34 đầu tiên theo sau nó trên trang sẽ chặn hiển thị trang đó. Ví dụ: Google Analytics khuyên bạn nên đặt mã theo dõi vào

<head>
    <link rel="import" href="bootstrap.html">
head>

42, Nếu bạn không thể tránh đặt

<head>
    <link rel="import" href="bootstrap.html">
head>

34 vào

<head>
    <link rel="import" href="bootstrap.html">
head>

42, việc thêm động nhập sẽ ngăn trang bị chặn

<head>
    <link rel="import" href="bootstrap.html">
head>

0

Ngoài ra, thêm phần nhập vào gần cuối của

<head>
    <link rel="import" href="bootstrap.html">
head>

46

<head>
    <link rel="import" href="bootstrap.html">
head>

1

Cách tiếp cận cuối cùng này là ít thích hợp nhất. Trình phân tích cú pháp không bắt đầu hoạt động trên nội dung nhập cho đến cuối trang

Những điều cần ghi nhớ #

Mimetype của một lần nhập là

<head>
    <link rel="import" href="bootstrap.html">
head>

55

Tài nguyên từ các nguồn gốc khác cần được kích hoạt CORS
Các lần nhập từ cùng một URL được truy xuất và phân tích cú pháp một lần. Điều đó có nghĩa là tập lệnh trong lần nhập chỉ được thực thi khi lần nhập đầu tiên được nhìn thấy
Các tập lệnh trong một lần nhập được xử lý theo thứ tự, nhưng không chặn quá trình phân tích cú pháp tài liệu chính
Liên kết nhập không có nghĩa là "#bao gồm nội dung ở đây". Nó có nghĩa là "trình phân tích cú pháp, hãy tắt tìm nạp tài liệu này để tôi có thể sử dụng nó sau". Mặc dù tập lệnh thực thi tại thời điểm nhập, biểu định kiểu, đánh dấu và các tài nguyên khác cần được thêm vào trang chính một cách rõ ràng. Lưu ý, không cần thêm rõ ràng
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
56. Đây là điểm khác biệt chính giữa Nhập HTML và
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
8, có nội dung "tải và hiển thị nội dung này tại đây"

Sự kết luận #

Nhập HTML cho phép gói HTML/CSS/JS dưới dạng một tài nguyên. Mặc dù bản thân chúng hữu ích, nhưng ý tưởng này trở nên cực kỳ mạnh mẽ trong thế giới Thành phần Web. Các nhà phát triển có thể tạo các thành phần có thể tái sử dụng để người khác sử dụng và đưa vào ứng dụng của riêng họ, tất cả đều được phân phối thông qua

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js">script>
<script src="bootstrap.js">script>
<script src="bootstrap-tooltip.js">script>
<script src="bootstrap-dropdown.js">script>
...


<template>
    ...
template>

2

Nhập HTML là một khái niệm đơn giản, nhưng cho phép một số trường hợp sử dụng thú vị cho nền tảng

Trường hợp sử dụng #

Phân phối HTML/CSS/JS có liên quan dưới dạng một gói duy nhất. Về mặt lý thuyết, bạn có thể nhập toàn bộ ứng dụng web vào một ứng dụng khác
Tổ chức mã - phân đoạn các khái niệm một cách hợp lý thành các tệp khác nhau, khuyến khích tính mô đun và khả năng sử dụng lại**
Cung cấp một hoặc nhiều định nghĩa Phần tử tùy chỉnh. Một lần nhập có thể được sử dụng để đăng ký và đưa chúng vào một ứng dụng. Điều này thực hành các mẫu phần mềm tốt, giữ cho giao diện/định nghĩa của phần tử tách biệt với cách nó được sử dụng
Quản lý các phụ thuộc - tài nguyên được tự động loại bỏ
Tập lệnh chunk - trước khi nhập, thư viện JS có kích thước lớn sẽ có tệp của nó được phân tích cú pháp hoàn toàn để bắt đầu chạy, tốc độ chậm. Với quá trình nhập, thư viện có thể bắt đầu hoạt động ngay khi đoạn A được phân tích cú pháp. Độ trễ ít hơn
```
<head>
    <link rel="import" href="bootstrap.html">
head>
```
2
Song song hóa phân tích cú pháp HTML - lần đầu tiên trình duyệt có thể chạy song song hai (hoặc nhiều) trình phân tích cú pháp HTML
Cho phép chuyển đổi giữa chế độ gỡ lỗi và không gỡ lỗi trong một ứng dụng, chỉ bằng cách thay đổi chính mục tiêu nhập. Ứng dụng của bạn không cần biết liệu mục tiêu nhập là tài nguyên được gói/biên dịch hay cây nhập

Cập nhật lần cuối. Ngày 19 tháng 12 năm 2013 — Cải thiện bài viết

Quay lại tất cả các bài viết

Đăng lại

đặt mua

Đóng góp

Nộp một lỗi
Xem nguồn

Nội dung liên quan

nhà phát triển. trình duyệt Chrome. com
cập nhật Chrome
nghiên cứu trường hợp
Podcast
trình diễn

Liên kết

Twitter
YouTube

Trình duyệt Chrome
căn cứ hỏa lực
Nền tảng đám mây của Google
Tất cả sản phẩm

chủ đề tối

Điều khoản & Quyền riêng tư
Hướng dẫn cộng đồng

Trừ khi có ghi chú khác, nội dung của trang này được cấp phép theo Creative Commons Attribution 4. 0 và các mẫu mã được cấp phép theo Apache 2. 0 Giấy phép. Để biết chi tiết, hãy xem Chính sách trang web dành cho nhà phát triển của Google

Tôi có thể đưa một tệp HTML vào một tệp khác không?

Thành phần cơ bản mà bạn có thể sử dụng để đưa HTML vào các tài liệu HTML khác là liên kết HTML . Phần tử liên kết có thẻ mở và thẻ đóng.

Làm cách nào để kết hợp hai tệp HTML thành một?

Cách hợp nhất tệp HTML trực tuyến .

Chọn hoặc thả tài liệu HTML của bạn để tải lên để hợp nhất

Sau khi tải lên hoàn tất, hãy kéo hình thu nhỏ của tài liệu HTML để sắp xếp lại chúng (nếu cần)

Nhấp vào nút Hợp nhất ngay để bắt đầu quá trình hợp nhất

Khi các tài liệu HTML của bạn được hợp nhất, hãy nhấp vào nút Tải xuống ngay

Có thể nhập HTML không?

Nhập HTML là một cách để bao gồm và sử dụng lại tài liệu HTML trong các tài liệu HTML khác .

programming html