使用JQuery加载页面片段（使用片段CSS/脚本）

我见过许多类似的问题，但没有一个专门解决这个问题

对于web应用程序，我设计了许多特定的动态“片段”（例如，当前会话的登录状态）。这些片段保存为不完整的html（具体来说是不完整的jsp页面）。它们没有html或body标记。但是有css样式和javascript文件是片段工作所必需的

Fragment.jsp

<script type="text/javascript">
[...]code and functions to use ajax request to load current name using sessions
</script>

<div id="userProfile">
<H1>Current User:<span id="name">NONE GIVEN</span></H1>
</div>

<div id="widget">
This contains the widget html. For the example here is a div to fill with data dynamically
<div id="dynamic"></div>
</div>

[…]使用ajax请求使用会话加载当前名称的代码和函数
当前用户：未指定任何用户

然后，我们的目标是使用JQuery在当前页面上加载片段，添加css使其保持在右上角的固定位置

在动态加载这些片段时考虑CSS。如果使用$（“#someID”）.load（）加载这样的片段，那么包含的CSS和JS链接将加载到当前容器中，从而使html无效

使用url$（“#someID”）中的选择仅加载片段；，然后动态加载css和js

---

我认为应该避免将代码静态添加到页面，因为使用片段的页面数量会导致必须对许多页面进行更改，从而导致无法管理的站点。

既然这似乎是另一个无用的问题，让我给出我对它的看法，以及我使用的解决方案。请记住，这可能不正确，因为我刚刚开始网页设计

-我使用带有servlet/JSP的Tomcat作为服务器端，但这对创建和使用小部件没有影响

fragment.jsp

<script type="text/javascript">
[...]code and functions to use ajax request to load current name using sessions
</script>

<div id="userProfile">
<H1>Current User:<span id="name">NONE GIVEN</span></H1>
</div>

<div id="widget">
This contains the widget html. For the example here is a div to fill with data dynamically
<div id="dynamic"></div>
</div>

现在，只要在我的主页上调用initiateFragment（）（确保包含fragment.js），片段就会加载并显示