javascript - 如何从一个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>

有了这两个文件，我就可以访问我正在处理的页面上的所有脚本和标签库。

由于我几乎只使用 JSP，所以我对 HTML5 很陌生，并且希望是否可以在我的所有 html 页面上使用相同的方法。如果是这样，怎么办？

Answer 1

为了加载 HTML 文件，请添加一个带有 rel 属性中的 import 的链接标记以及一个包含 HTML 文件路径的 href。例如，如果要将名为 component.html 的 HTML 文件加载到 index.html 中:

index.html

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

您可以将任何资源(包括脚本、样式表和 Web 字体)加载到导入的 HTML 中，就像加载常规 HTML 文件一样:

组件.html

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

doctype、html、head、body 不是必需的。 HTML 导入将立即加载导入的文档、解析子资源并执行 JavaScript(如果有)。