如何從一個html文件加載所有腳本和鏈接？

Question

在JSP中，我通常只需做以下操作即可使用所有頁面中都包含的兩個文件：

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

include.jsp包含以下內容：

<%@ 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具有以下內容：

<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>

有了這兩個文件，我就可以訪問正在處理的頁面上的所有腳本和taglib。

由於我幾乎只使用過JSP，因此我是HTML5的新手，並希望在所有html頁面上使用相同的方法。 如果是這樣，怎么辦？

Answer 1

為了加載HTML文件，請在rel屬性中添加一個帶有import的鏈接標簽，並在href中包含HTML文件的路徑。 例如，如果要將一個名為component.html的HTML文件加載到index.html中：

index.html

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

您可以像導入常規HTML文件一樣將任何資源（包括腳本，樣式表和Web字體）加載到導入的HTML中：

component.html

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

不需要doctype，html，head，body。 HTML導入將立即加載導入的文檔，解析子資源並執行JavaScript（如果有）。