简体   繁体   English

在每个jsp页面中包含css和js文件

[英]Include css and js file in every jsp page

I have common css and js files that i include in every jsp file. 我有常见的css和js文件,我包含在每个jsp文件中。

So what's the best practice to include them in every page ? 那么在每个页面中包含它们的最佳做法是什么?

I used to use <%@ include file="header.jsp" %> but I'm wondering if this is the best and clean way to proceed. 我以前使用<%@ include file="header.jsp" %>但我想知道这是否是最好和最干净的方法。

I like using fragments for this, they are standard supported by JSP so no other dependencies are needed. 我喜欢使用片段,它们是JSP支持的标准,因此不需要其他依赖项。 And as you will see it will comes with lot's of other benefits. 正如您将看到它将带来许多其他好处。

Create a tag (parentpage.tag): 创建标记(parentpage.tag):

<%@tag description="Base page" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@attribute name="extra_css" fragment="true" %>
<%@attribute name="footer" fragment="true" %>
<%@attribute name="header" fragment="true" %>

<html>
<head> ....
// insert css that is needed for every page
<jsp:invoke fragment="extra_css"/>
<jsp:invoke fragment="header"/>
<jsp:doBody/>
<jsp:invoke fragment="footer"/>

Then you create individual pages that inherit from this tag 然后,您创建从此标记继承的单个页面

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:parentpage>

    <jsp:attribute name="extra_css">
        // custom css for this page 
    </jsp:attribute>
    <jsp:attribute name="footer">
        // footer content
    </jsp:attribute>
    <jsp:body>
       // body content
    </jsp:body>

</t:parentpage>

You can try this without any framework, in your web.xml : 您可以在web.xml尝试不使用任何框架:

<jsp-config>
   <jsp-property-group>
     <display-name>Display</display-name>
     <url-pattern>*.jsp</url-pattern>
     <el-ignored>false</el-ignored>
     <scripting-invalid>false</scripting-invalid>
     <is-xml>false</is-xml>
     <include-prelude>/template/header.jsp</include-prelude><!-- header -->
     <include-coda>/template/footer.jsp</include-coda><!-- footer -->
   </jsp-property-group>
 </jsp-config>

See more here 在这里查看更多

Yes! 是! It can be a good option to have all the css and js defination in one jsp and then include that jsp in all pages/jsp. 在一个jsp中包含所有css和js defination然后在所有pages / jsp中包含jsp可能是一个很好的选择。

As you are using spring i would suggest you use tiles https://tiles.apache.org/ that is the much better way to make a standard layout and then use that layout in your all jsp. 当您使用spring时,我建议您使用tile https://tiles.apache.org/这是制作标准布局的更好方法,然后在您的所有jsp中使用该布局。

The best solutions is to use JSP Tag File. 最好的解决方案是使用JSP标记文件。 It allows to encapsulate reusable content using Tag Files : Java doc ref 它允许使用标记文件封装可重用内容: Java doc ref

Here is a good answer with example : https://stackoverflow.com/a/3257426/1140748 以下是一个很好的答案: https//stackoverflow.com/a/3257426/1140748

Make JavaScript and CSS External. 使JavaScript和CSS外部。

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. 在现实世界中使用外部文件通常会产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。 JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. 每次请求HTML文档时,都会下载HTML文档中内联的JavaScript和CSS。 This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. 这减少了所需的HTTP请求数,但增加了HTML文档的大小。 On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests. 另一方面,如果JavaScript和CSS位于浏览器缓存的外部文件中,则HTML文档的大小会减少,而不会增加HTTP请求的数量。

Follow these links to get more info on this: 请点击以下链接获取更多信息:

" https://developer.yahoo.com/performance/rules.html " https://developer.yahoo.com/performance/rules.html

" include external java script file in jsp page " 在jsp页面中包含外部java脚本文件

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM