Computer Keyboard - Głównie JavaScript

Głównie JavaScript

rss feed icon

by

Importy HTML

Importy HTML (ang. HTML Imports) to nowa funkcjonalność w HTML, która jest częścią web komponentów. Daje możliwość importowania skryptów JavaScript, szablonów CSS czy stron HTML oraz daje dostęp do ich zawartości. Tak jak w przypadku AJAX-a, ale następuje to zanim strona się załaduje, w momencie gdy parser napotka tag importu w HTML.

W HTML istniało do tej pory kilka sposobów na ładowanie zewnętrznej treści:

  • iframe - służą do dodawania zagnieżdżonych stron HTML.
  • link - z jego pomocą można dodawać do strony arkusze CSS, fav-ikonki lub zlinkować Kanał RSS itp.
  • script - służy do załadowania plików JavaScript jeśli użyto atrybutu src.
  • audio - można za jego pomocą załadować pliki muzyczne.
  • video - służy do dołączania plików wideo.
  • object - stary sposób dołączania zewnętrznych treści.

Teraz do tego dochodzą jeszcze importy HTML. Aby dołączyć za ich pomocą zewnętrzny plik, używamy tagu link z atrybutem rel="import":

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

podana strona może zawierać pliki JavaScript i CSS np.:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
</html>

Jeśli dołączymy w naszym skrypcie taki import, załaduje on nam do strony bibliotekę jQuery. Importy są singletonami więc jeśli dołączymy kilka razy dany import będzie on pobrany tylko raz.

Dzięki importom HTML mamy możliwość definiowania komponentów, które dołączają wszystkie potrzebne pliki np. poniżej import który dołączy moją bibliotekę jQuery Terminal i utworzy globalną funkcje terminal:

<!DOCTYPE html>
<html>
<head>
<script src