如何从一个html文件加载所有脚本和链接？

Question

In JSPs, I normally use two files that are included on all pages by simply doing:

<%@include file="include/include.jsp"%>
<%@include file="include/imports.jsp"%>

include.jsp contains the following content:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

imports.jsp has the following:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type"
content="text/javascript; charset=UTF-8" />

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css"
type="text/css" media="screen" />       
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css"
type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />

<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/bootstrap-responsive.css"
type="text/css" media="screen" />
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/datepicker.css"
type="text/css" media="screen" />
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/flip-tabs.css"
type="text/css" media="screen" />
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/favicon.ico" /> 

<script src="${pageContext.request.contextPath}/static/js/jquery-1.12.1.min.js" ></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap-datepicker.js" ></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.quickflip.min.js" ></script>

With those two files included, I can access all scripts and taglib on the page I'm working on.

Since I've worked almost exclusively with JSPs, I'm new to HTML5 and would like if it's possible using the same approach on all my html pages. If so, how?

Answer 1

In order to load an HTML file, add a link tag with an import in the rel attribute and an href that contains a path to the HTML file. For example, if you want to load an HTML file called component.html into index.html:

index.html

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

You can load any resource including scripts, stylesheets, and web fonts, into the imported HTML just like you do to regular HTML files:

component.html

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

doctype, html, head, body aren't required. HTML Imports will immediately load the imported document, resolve sub resources and execute JavaScript, if any.