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属性中添加带导入的链接标记，并在href中添加包含HTML文件路径的href。例如，如果要将名为component.html的HTML文件加载到index.html：

的index.html

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

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

component.html

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

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

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

1 个答案: