如何在使用 jQuery 进行 ajax 请求后替换页面的整个 CSS？答案

【问题标题】：How to replace entire CSS of a page after an ajax request with jQuery?如何在使用 jQuery 进行 ajax 请求后替换页面的整个 CSS？
【发布时间】：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 以保持整洁）

标签： jquery ajax dom head

【解决方案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 是光明的主题。跨度>