使用SiteMesh(2.4.2) ，被装饰页面导入的外部js文件无法调用的问题

Jackin_Zhang

于 2018-01-03 01:33:03 发布

阅读量808

点赞数 1

分类专栏： Debug 前端文章标签： javascript sitemesh

本文链接：https://blog.csdn.net/Jackin_Zhang/article/details/78957293

版权

Debug 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

写在前面的废话：

自从大学毕业后，10年间几乎没写过什么代码，最新的技术也没研究过，更不要说前端开发这种软件工程师一般不怎么关注的部分。

近期心血来潮，准备自己写个管理系统，前端后端全部一个人搞。结果刚刚动手，一大堆问题如潮水般涌来，很多小bug往往要花一天的时间才能调试出来。

这篇文章算是分享一下个人经验，供参考。

------------------------------------------------------------------------

在做前端页面时，发现写在jspx里面的js代码能够被执行，把js代码放到外部单独的js文件后，就无法调用了。

然后老办法，在网上找答案，结果度娘搜出来的回答基本上都锁定在以下几个主要面向：

1. js文件的路径是否引用正确

2. 使用jQuery的话，自己写的js要放在jQuery包引用后面

3. js引用最好放在页面最后，即</body>标签之前

4. js文件中不要用<script> </script>标签对

按照网上的回答一顿调试，结果发现无法解决问题，死活找不出原因。后来仔细对比网上给出的例子，猛然间想起来是不是工程中引用的框架有问题。

因为之前用过tiles，这次我对页面的布局采用的是从来没用过的SiteMesh （版本2.4.2）。调试结果果然是SiteMesh框架的问题（不知道最新的3.0+版本是否解决了

这个bug）。

首先，是装饰页面的代码片段：

    <body>
        <div id="wrapper">
            <jsp:directive.include file="/WEB-INF/snippets/header.jspx"/>
            <sitemesh-decorator:body/>
            <jsp:directive.include file="/WEB-INF/snippets/footer.jspx"/>
        </div>
    </body>

非常典型的header，body，footer三段布局。按照正常的逻辑分析，sitemesh应该是将body页面的内容，插入到header.jspx和footer.jspx中间。

然后是被装饰页面的body部分代码片段：

<body>
    <p>Test sitemesh 2 successful!</p>
    <button name="test_button" id="test_buttom" οnclick="testFunc(this.id)"/>
    <script type="text/javascript" src="/script/test.js" charset="UTF-8"></script>
</body>

在调试过程中，我已经按照网上搜到的那些回答有意识地将js引用的<script>标签放在了body的最末处，并且为了避免外部js文件编码导致一些意想不到的问题，我还特意在<script>标签中指明了charset编码是UTF-8，然并卵。

后来网上有人支招，说看看jsp文件被解析后，浏览器真实收到的存html代码是怎样的。我一开始用Google Chrome查看页面代码，结果如下：

......(以上是header.jspx中的内容，被整体包含在hmtl5的<header>标签内)

</header>

    <p>Test sitemesh 2 successful!</p>

    <button οnclick="testFunc(this.id)" id="test_buttom" name="test_button"/>

    <script charset="UTF-8" src="/script/test.js" type="text/javascript"/>

<footer id="footer">

......（以下是footer.jspx中的内容，被整体包含在html5的<footer>标签内）

以上查看到的页面源码，和之前逻辑分析的一样，页面被按照header，body，footer三层式排列包装，没毛病；而且<script>标签导入装饰页面也正确，点击js文件链接在浏览器中能看到js文件中的源码，一切看起来都是这么的正常。

但是，真的是这样么？？？？？

随后我又怕浏览器有问题，换了firefox，IE，Edge查看页面源码，都是一样的。本来以为这个问题暂时无解了，后来想到了firefox貌似有个开发者版本，就下载下来试一试，在inspection功能下，发现了问题，如下图：

SiteMesh竟然将footer页面的内容写入到了<script></script>标签对里面！！！

找到了问题的症结，解决方案也就简单了，我猜测是因为源代码中引用外部js文件时，<script>标签包含的内容是空的，导致Sitemesh错误地进行了页面装饰排版。

尝试在<script></script>标签对中增加一行html注释，问题解决。

    <script type="text/javascript" src="/script/test.js" charset="UTF-8">
        <!-- -->
    </script>

Jackin_Zhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用SiteMesh(2.4.2) ，被装饰页面导入的外部js文件无法调用的问题

写在前面的废话：自从大学毕业后，10年间几乎没写过什么代码，最新的技术也没研究过，更不要说前端开发这种软件工程师一般不怎么关注的部分。近期心血来潮，准备自己写个管理系统，前端后端全部一个人搞。结果刚刚动手，一大堆问题如潮水般涌来，很多小bug往往要花一天的时间才能调试出来。这篇文章算是分享一下个人经验，供参考。------------------------------------
复制链接

扫一扫