多个<script>标签和FF!和Opera所需的<! - // - > </script>

时间:2010-09-07 15:08:39

标签: javascript html spring-mvc

我使用Spring Roo生成一个基本的Web项目。 UI是基于JSP的,具有Tiles布局。查看默认布局代码,我注意到标签定义如下:

<script src="${dojo_url}" type="text/javascript" ><!-- //required for FF3 and Opera --></script>
<script src="${spring_url}" type="text/javascript"><!-- //required for FF3 and Opera --></script>
<script src="${spring_dojo_url}" type="text/javascript"><!-- //required for FF3 and Opera --></script>

如果我取出脚本标记之间的注释,Firefox中生成的HTML包含第一个标记,但不包含其他标记。如果我把评论放回到生成的HTML中是正确的。

我的问题是:为什么这是行为?

脚本标记的(documentation)未提及它需要包含任何类型的数据内容。这是浏览器问题(如评论所暗示的)还是JSP或Spring问题?

返回HTML和浏览器输出
无论是否存在评论,cURL结果都是相同的:

<head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <link href="/student-cloud-app/static/styles/login.css;jsessionid=FFED09C524087878AEF09142A6A6F375" media="screen" type="text/css" rel="stylesheet" />
    <link href="/student-cloud-app/static/images/favicon.ico;jsessionid=FFED09C524087878AEF09142A6A6F375" rel="SHORTCUT ICON" />
    <script type="text/javascript" src="/student-cloud-app/resources/dojo/dojo.js;jsessionid=FFED09C524087878AEF09142A6A6F375"></script>
    <script type="text/javascript" src="/student-cloud-app/resources/spring/Spring.js;jsessionid=FFED09C524087878AEF09142A6A6F375"></script>
    <script type="text/javascript" src="/student-cloud-app/resources/spring/Spring-Dojo.js;jsessionid=FFED09C524087878AEF09142A6A6F375"></script>
    <title>
      Sample App
    </title>
</head>

事实上,无论评论是否存在,从Firefox执行View Source看起来都是一样的:

<head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <link href="/student-cloud-app/static/styles/login.css" media="screen" type="text/css" rel="stylesheet" />
    <link href="/student-cloud-app/static/images/favicon.ico" rel="SHORTCUT ICON" />
    <script type="text/javascript" src="/student-cloud-app/resources/dojo/dojo.js"></script>
    <script type="text/javascript" src="/student-cloud-app/resources/spring/Spring.js"></script>
    <script type="text/javascript" src="/student-cloud-app/resources/spring/Spring-Dojo.js"></script>
    <title>
      Sample App
    </title>
</head>

但是,如果我打开Firebug并检查HTML树,删除了注释,则会有一个脚本元素,它包含一条错误消息:

  

无法加载:http://localhost:8080/student-cloud-app/resources/dojo/dojo.js

的来源

我得到空白页而不是登录表。如果我重新添加注释,Firebug会报告所有脚本标记,没有错误,页面会显示登录表单。禁用Firebug对页面是否正确呈现没有影响;没有评论=空白页面,评论=正确呈现页面。

更新 返回的实际标签是自动关闭的。 HTML整理正在解决这个问题。自动关闭脚本标记实际上是导致问题的原因。

更新2:示例HTML 以下是具有适当关闭的脚本标记的HTML,可在浏览器中使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8"
    http-equiv="Content-Type" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <link href="/student-cloud-app/static/styles/login.css"
    media="screen" type="text/css" rel="stylesheet" />
    <link href="/student-cloud-app/static/images/favicon.ico"
    rel="SHORTCUT ICON" />
    <script type="text/javascript" src="/static/scripts/ajax.js"></script>
    <script type="text/javascript" src="/static/scripts/jquery-1.4.2.min.js"></script>
    <title>Student Cloud</title>
  </head>
  <body>
    <div id="container">
      <form method="POST"
      action="/student-cloud-app/static/j_spring_security_check"
      name="f">
        <table align="center" class="table">
          <tr>
            <td>
              <label for="j_username">User name:</label>
            </td>
            <td>
              <input name="j_username" type="text"
              id="j_username" />
            </td>
          </tr>
          <tr>
            <td>
              <label for="j_password">Password:</label>
            </td>
            <td>
              <input name="j_password" type="password"
              id="j_password" />
            </td>
          </tr>
          <tr>
            <td class="login_button" colspan="2">
              <input value="Login" type="submit" />
            </td>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>

以下是完全相同的HTML,但自关闭脚本标记除外:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8"
    http-equiv="Content-Type" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <link href="/student-cloud-app/static/styles/login.css"
    media="screen" type="text/css" rel="stylesheet" />
    <link href="/student-cloud-app/static/images/favicon.ico"
    rel="SHORTCUT ICON" />
    <script type="text/javascript" src="/static/scripts/ajax.js" />
    <script type="text/javascript" src="/static/scripts/jquery-1.4.2.min.js" />
    <title>Student Cloud</title>
  </head>
  <body>
    <div id="container">
      <form method="POST"
      action="/student-cloud-app/static/j_spring_security_check"
      name="f">
        <table align="center" class="table">
          <tr>
            <td>
              <label for="j_username">User name:</label>
            </td>
            <td>
              <input name="j_username" type="text"
              id="j_username" />
            </td>
          </tr>
          <tr>
            <td>
              <label for="j_password">Password:</label>
            </td>
            <td>
              <input name="j_password" type="password"
              id="j_password" />
            </td>
          </tr>
          <tr>
            <td class="login_button" colspan="2">
              <input value="Login" type="submit" />
            </td>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>

保存为.html文件,第一个示例在浏览器中正确显示,第二个示例没有。

2 个答案:

答案 0 :(得分:1)

评论到位后,生成的HTML中的<script>代码的结尾标记为</script>。当这些评论被删除后,标签就会自动关闭。

在大多数浏览器中,显然自动关闭脚本标记为problematic。感谢thenduks指出我正确的方向。

答案 1 :(得分:0)

您是否正确删除了评论?可能是你删除了太多或太少的评论开放/关闭。你有这个吗?

<script src="${dojo_url}" type="text/javascript"></script>
<script src="${spring_url}" type="text/javascript"></script>
<script src="${spring_dojo_url}" type="text/javascript"></script>

确保删除相同数量的<!---->块。