如何将正确的 HTML 写入 JSP 中的内联 Javascript？答案

【问题标题】：How can one write correct HTML to an inline Javascript inside a JSP?如何将正确的 HTML 写入 JSP 中的内联 Javascript？
【发布时间】：2015-01-20 05:50:22
【问题描述】：

由于某些原因，我必须在我的页面中加载两个单独的页眉 HTML。其中一个是移动视图的标题，另一个是桌面视图。我页面的其余部分是响应式的。我的计划是在页面加载时加载的 JS 中加载两个标题的 HTML，并根据页面宽度在我的页面中填充正确的标题 HTML，并希望加载相应的 JS 和 CSS。我这样做是因为两个标题 HTML 的 JS 和 CSS 容易发生冲突（而且我无法修改这些 HTML），所以我只希望它们在页面加载时加载。

问题在于在这个内联 JS 中用 JSP 编写 HTML。我反复收到类似“Uncaught SyntaxError: Unexpected token ILLEGAL”之类的错误。

我在 JSP 中的代码如下所示：

            <c:when test="${not empty hdrLoggedInHtml and not empty hdrLoggedInHtml_M}">
                <script type="text/javascript">
                    $(document).ready(function(){
                            if($(window).width()>420)
                            {
                                $("#desktopHeader").html('<c:out value="${hdrLoggedInHtml}" escapeXml="false"/>');
                                $("#mobileHeader").html("");                                        
                            }else
                            {
                                $("#mobileHeader").html('<c:out value="${hdrLoggedInHtml_M}" escapeXml="false"/>');
                                $("#desktopHeader").html("");
                            }

                        });
                    });
                </script>

            </c:when>

我尝试使用 fn:escapeXml 但这也不起作用。在我看来，字符串内<html> 之后的新行没有正确输出，或者一些不可见的字符以某种方式出现。请帮忙。

【问题讨论】：

标签： javascript jsp jstl jspx

【解决方案1】：

将 hdrLoggedInHtml 放入一个 html 节点中，该节点之前为 display:none，例如：

   <script>
         var global = {} ; global.url = '${url}';global.data = $.parseJSON('${data}');
   </script>

然后，将脚本放在JSP页面的底部，这里是一个例子：

 <script type="text/javascript">
                $(document).ready(function(){
                        if($(window).width()>420)
                        {
                            $("#desktopHeader").load(global.url,global.data);
                            $("#mobileHeader").html("");                                        
                        }else
                        {
                            $("#mobileHeader").html($('#'));
                            $("#desktopHeader").html("");
                        }

                    });
                });

【讨论】：

hdrLoggedInHtml 中的 HTML 会下载自己的 JS 和 CSS。如果我把它放在一个 div 中，那么这些资源就会加载，我不希望这样。
我正在改变它，把它放到脚本标签中
在尝试您的方法后我遇到了同样的错误。
我猜是这样的原因是 ${hdrLoggedInHtml} 本身有 newline 。当JSP模板渲染时，换行符会一起渲染。所以，我不认为这是一个很好的响应设计的解决方案。但是，使用 jstl标签可能会起作用。
是的，我认为换行符是原因。但 hdrLoggedInHtml 不是静态内容。它被控制器修改并传递给JSP。所以我不能把它放到一个静态文件中并包含它。