我见过许多类似的问题,但没有一个专门解决这个问题。
对于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),该片段就会加载并显示。