如何在使用 jQuery 进行 ajax 请求后替换页面的整个 CSS？
Posted
技术标签:
【中文标题】如何在使用 jQuery 进行 ajax 请求后替换页面的整个 CSS？【英文标题】：How to replace entire CSS of a page after an ajax request with jQuery? 【发布时间】：2011-01-09 22:27:17 【问题描述】：我有一个链接了一个 CSS 的文档。如何将当前的 CSS 替换为来自我刚刚使用 jQuery 通过 AJAX 请求获取的文档的一个？
这是我现在正在尝试的代码，但到目前为止没有成功：
$(function()
$.get('next_page.html', function(data, textStatus)
$('link[rel=stylesheet]:first')
.attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
);
);
更新： $.find() 在任何浏览器中都不起作用（经过测试的 Firefox 3.5， Mac 上的 Chrome 和 Safari 3），但是 $.filter() 只找到样式表 在 Firefox 3.5 中 - 仍然没有 Chrome 和 Safari 3。
应该很简单吧 - 用新的 CSS href 替换当前的 CSS href，然后瞧？
由于某种原因，jQuery 无法在 <head> 标记内找到来自 AJAX 请求的任何内容。此外，jQuery 甚至无法从 AJAX 数据中找到整个 <head> 本身。也就是说，回调函数内部的$(data).find('head').size()返回0。
我使用的是 jQuery 1.4。
2010 年 2 月 10 日更新：我向 jQuery 提交了一个关于此的错误，他们同意无法从 ajax 数据的 <head> 标记中找到任何内容。
这是我得到的回复：
http://dev.jquery.com/ticket/6061#comment:1 — “是的，没错 - 解析 直接的 HTML 我们只保证 body 元素的内容。如果你 希望访问页面的 XML 直接然后我建议你 明确地制作文件 .xhtml 或 以 XML 格式请求它，例如："
【问题讨论】：
问题会不会是ajax结果没有加载到DOM中，所以jQuery在DOM中搜索它不起作用？尝试将其作为子项附加到 current_page 上的不可见 div，然后查看是否可以抓取链接标签（然后删除 div 以保持整洁） 【参考方案1】：这个 jquery 应该这样做：
$(document).ready(function()
$.get("next_page.html", function(data)
$("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
);
);
【讨论】：
这也不起作用！ :( 似乎 jQuery 无法从 ajax 数据中找到整个 标记。 更新：$.filter() 在 Firefox（Mac 上 3.5 版）中找到样式表，但在 Google Chrome 和 Safari（Mac 上）中都不起作用。所以很遗憾还是没有解决。 响应类型似乎没有问题。我对此进行了测试，它是 IE、FF 和 Chrome 中的 text/html（没有 Safari 可以测试）。由于某种原因，过滤器后的 attr("href") 不会找到 href 属性值。您是否有理由使用不同的页面来获取新样式表的 url？为什么不直接使用页面上的链接并从那里获取 url？【参考方案2】：试试这个：
$.load('next_page.html', function(data)
$('link[rel=stylesheet]:first').replaceWith($(data).find('link[rel=stylesheet]:first'));
);
在您自己的示例中，您实际上并没有进行 AJAX 调用，也许这就是问题所在，或者您只是忘记添加 .load 部分？这应该可以正常工作，因为它位于 $(document).ready(function() ... ); 块内。
【讨论】：
抱歉，我确实忘记了 .get 部分。我编辑了我的问题，所以现在它是正确的。 仍然，这并没有解决问题，因为 $(data).find('link[rel=stylesheet]') 没有找到 @Martin，你的data 是什么样的？
数据是一个完整的xhtml 1.0过渡页面
你验证了吗？也许它比你想象的更具过渡性【参考方案3】：
根据 jQuery 开发团队，这是有效的——“解析直接 HTML 我们只保证 body 元素的内容。如果您希望直接访问页面的 XML，那么我建议您明确地制作文件 .xhtml 或请求以 XML 格式，例如："
$.ajax( dataType: "xml", file: "some.html", success: function(data) ... );
【讨论】：
【参考方案4】：我让它在我的网站上运行。我只是在加载我的 CSS 的链接标签中添加了一个 id。然后你改变 attri href （你得到了正确的部分）。
HTML：
<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>
我使用一个选择让用户选择他的皮肤。
<select onchange="$('#llt_skin_href').attr('href', $(this).val());">
<option value="/llt_style/skin/jour.css">Jour</option>
<option value="/llt_style/skin/nuit.css">Nuit</option>
</select>
【讨论】：
你可以在这里工作的 PLAIN JS：louisloudogtrottier.net/configuration+Utilisateur/… （所以，网站是我所居住的法律的法国事业。Nuit 是黑暗的主题，jour 是光明的主题。跨度>以上是关于如何在使用 jQuery 进行 ajax 请求后替换页面的整个 CSS？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JQuery .Ajax 进行 Pingdom 检查？
如何在 jQuery $.ajax() 发布请求中向 MVC 控制器方法发送模型