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

对于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>


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


关于动态加载此类片段时的CSS。如果使用$(“#someID”)。load()加载这样的片段,则包含的CSS和JS链接会加载到当前容器中,从而使html无效?
使用URL $(“#someID”)。load(“ / fragments / Fragment.jsp #userProfile”);中的选择仅加载片段,然后动态加载CSS和js。


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

最佳答案

由于这似乎是另一个愚蠢的问题,因此,让我就它以及我使用的解决方案进行说明。请记住,这可能是不正确的,因为我刚刚开始进行网页设计。

-我将Tomcat和Servlets / JSP用作服务器端,但这对创建和使用小部件没有影响。

片段

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


fragment.js

function initiateFragment(){
  $.get(aUrl,function(data){
    //callback goes here
    $("body").append(data);
    $("#dynamic").html(//dynamic content for the div);
    $("#widget").css(//Add any css here, don't include it to force modularity);
    //Since I needed a login widget, I added css to move the div out of document flow and to the top right
    });
}


现在,只需在我的主页上调用initializeFragment()(确保包括fragment.js),该片段就会加载并显示。

10-05 21:07
查看更多