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

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

问题在于在这个内联JS中用JSP编写HTML。我反复出现错误，比如“uncaughtsyntaxerror:意外标记非法”

我在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>

$（文档）.ready（函数（）{
如果（$（窗口）.width（）>420）
{
$（“#desktopHeader”）.html（“”）；
$（“#mobileHeader”）.html（“”）；
}否则
{
$（“#mobileHeader”）.html（“”）；
$（“#desktopHeader”）.html（“”）；
}
});
});

我尝试使用fn:escapeXml，但也不起作用。在我看来，字符串中

之后的新行没有得到正确的输出，或者不知何故出现了一些不可见的字符。 请帮忙

将hdrLoggedInHtml放入一个html节点，该节点前面显示：none，如：

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

var全局={}；global.url='${url}'；global.data=$.parseJSON（'${data}'）；

然后，将脚本放在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("");
                        }

                    });
                });

$（文档）.ready（函数（）{
如果（$（窗口）.width（）>420）
{
$（“#desktopHeader”）.load（global.url，global.data）；
$（“#mobileHeader”）.html（“”）；
}否则
{
$（“#mobileHeader”）.html（$（“#”）；
$（“#desktopHeader”）.html（“”）；
}
});
});

hdrLoggedInHtml中的HTML下载自己的JS和CSS。如果我把它放在一个div中，那么这些资源将被加载，我不想这样。我正在更改它，将它放在script tag中。在尝试了您的方法之后，我得到了相同的错误。我想这是因为${hdrLoggedInHtml}本身有新行。当JSP模板呈现它时，换行符会随之呈现。因此，我认为进行响应设计不是一个好的解决方案。但是，使用jstl标记可能会产生效果。是的，我认为换行符是原因。但是hdrLoggedInHtml不是静态内容。它由控制器修改并传递给JSP。所以我不能把它放在一个静态文件中并包含它。