看了就能用的HTML+Freemarker小知识

发表于

大家好，我是“Java分布式架构实战”的作者Jamesfu。

问题起源

最近在按工信部要求对网站做适老化无障碍浏览改造。在改造过程中发现一个Bug如下图所示：
image.png
经过多轮排查，最终定位到网站变灰相关的一段freemarker代码，发现它的ELSE分支输出了一个空的<span></span>标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
bash复制代码[#assign nowTime = .now?string["hhmmSSsss"]/]
[#if checkGrayScale]
    [#if grayScaleType?? && 1==grayScaleType]
        <script>
          var isHomeGrayByTemplate = true
        </script>
        <link rel="stylesheet" href="/static/assets/css/homeGrayscale.css?t=${nowTime?number}"/>
    [#elseif grayScaleType?? && 2==grayScaleType]
        <script>
          var isHomeGrayByTemplate = false
        </script>
        <link rel="stylesheet" href="/static/assets/css/grayscale.css?t=${nowTime?number}"/>
    [/#if]
    <script type="text/javascript" src="/static/assets/third/jquery.gray.min.js?t=${nowTime?number}"></script>
    <script type="text/javascript" defer="defer" src="/static/assets/js/grayScale.js?t=${nowTime?number}"></script>
[#else]
    <span></span>
[/#if]

我推断就是这里的问题，因为span标签是需要渲染的，所以出现在了body标签中，不能出现在head标签中。经过多轮测试发现确实是这里的问题。

结论

  1. 在HTML <head></head>标签中不要出现具体的需要渲染的HTML标签，比如<span></span>等，否则会出现渲染标签以后的内容都会输出到<body></body>标签中。
  2. 在freemarker模板中，如果ELSE分析不输出任何内容，发现freemarker不会输出空文件，即不更新静态化文件，因此在ELSE分支中还必须输出点什么，所以我决定输出一个空script标签，最终问题得到解决。

最终提交的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
bash复制代码[#assign nowTime = .now?string["hhmmSSsss"]/]
[#if checkGrayScale]
    [#if grayScaleType?? && 1==grayScaleType]
        <script>
          var isHomeGrayByTemplate = true
        </script>
        <link rel="stylesheet" href="/static/assets/css/homeGrayscale.css?t=${nowTime?number}"/>
    [#elseif grayScaleType?? && 2==grayScaleType]
        <script>
          var isHomeGrayByTemplate = false
        </script>
        <link rel="stylesheet" href="/static/assets/css/grayscale.css?t=${nowTime?number}"/>
    [/#if]
    <script type="text/javascript" src="/static/assets/third/jquery.gray.min.js?t=${nowTime?number}"></script>
    <script type="text/javascript" defer="defer" src="/static/assets/js/grayScale.js?t=${nowTime?number}"></script>
[#else]
    <script></script>
[/#if]

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%