ajax页面加载，不会加载页面个人CSS文件
我正在创建一个 ipad 应用程序，
我有一个侧面导航，然后是一个主窗口。用户将单击导航中的链接，页面将在主窗口中加载。
我使用 ajax 在主窗口中动态加载页面，但是当我的页面加载时，它们不会加载自己的 css 或 js 文件，这些文件是我在页面 html 文件中链接的。
相反，我相信他们采用了整个网站的 CSS。
我读过我可以使用“loadobjs”来加载我的CSS，并且我的页面会动态加载。
我如何在我的代码中使用它？
如果您能得到答复，我们将不胜感激，
感谢您
提供以下代码：
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
i am creating an ipad app
i have a side navigation, and then a main window. user will click links in the navigation and pages will load up in the main window.
i use ajax to dynamically load my pages in my main window, but when my pages load they do not load with their own css or js files, which i have linked in the page html file.
instead i belive they take on the CSS of the entire site.
i have read i can use 'loadobjs' to load my CSS and my page loads dynamically.
how can i use that with my code?
a reply will be greatly appreciated
thank you
code provided below:
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这并不能直接回答您的问题，但我的建议是外部页面的 CSS 包含您加载的每个子页面的所有必要信息。
另外，您不应该通过 AJAX 加载整个 HTML 文档；您的 DOM 最终会看起来像这样（这是坏），
相反，修改您的内部文档以仅包含
div#main_content_inner中应包含的信息。This doesn't directly answer your question, but my recommendation is for the outer page's CSS to have all the necessary information for each child page you load.
Also, you shouldn't load entire HTML documents via AJAX; your DOM would end up looking something like this (which is bad)
Instead, modify your inner documents to only contain the information that should be in your
div#main_content_inner.