Como substituir todo o CSS de uma página, depois de uma solicitação ajax com jQuery?

StackOverflow https://stackoverflow.com/questions/2146594

  •  23-09-2019
  •  | 
  •  

Pergunta

Eu tenho um documento com um CSS ligados.Como posso substituir o atual CSS com um vindo de um documento que eu só buscados com a solicitação AJAX usando jQuery?

Aqui está o código que eu estou tentando agora, mas sem sucesso até o momento:

$(function() {
    $.get('next_page.html', function(data, textStatus) {
        $('link[rel=stylesheet]:first')
            .attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
    });
});

Atualização: $.find() não funciona em qualquer navegador (testado no Firefox 3.5, Google Chrome e Safari 3 no Mac), mas $.filter() encontrada a folha de estilos só no Firefox 3.5 - ainda nada em Google Chrome e Safari 3.

Ele deve ser simples, clique com o botão direito de substituir o atual CSS "href" com o novo, e voilá?

Por algum motivo, o jQuery não consegue encontrar qualquer coisa dentro da <head> tag que está vindo de solicitação AJAX.Além disso, a jQuery não consegue encontrar o todo <head> se, desde o AJAX de dados.Em outras palavras, $(data).find('head').size() dentro da função de retorno de chamada retorna 0.

Estou usando o jQuery 1.4.

ATUALIZAÇÃO Fev 10, 2010:I apresentou um bug sobre este jQuery e eles concordaram que não é possível encontrar qualquer coisa, desde o <head> tag do ajax de dados. Aqui está a resposta que eu recebi:

http://dev.jquery.com/ticket/6061#comment:1 — "Sim, está correto - análise HTML reta apenas garantimos o conteúdo do elemento body.Se você gostaria de acessar o XML da página diretamente, então eu recomendo que você explicitamente tornar o arquivo .xhtml ou pedido-lo como XML, por exemplo:"

Foi útil?

Solução 3

Isso é válido como por jQuery dev team — "análise reta HTML apenas garantimos o conteúdo do elemento body.Se você deseja acessar o XML da página diretamente, então eu recomendo que você explicitamente tornar o arquivo .xhtml ou pedido-lo como XML, por exemplo:"

$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });

Outras dicas

Este jquery deve fazê-lo:

  $(document).ready(function() {
        $.get("next_page.html", function(data) {
            $("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
        });
    });

Tente isso:

$.load('next_page.html', function(data) {
    $('link[rel=stylesheet]:first').replaceWith($(data).find('link[rel=stylesheet]:first'));
});

Você não estava realmente fazendo uma chamada AJAX no seu próprio exemplo, talvez foi esse o problema, ou você só esqueceu de adicionar o .load parte?Isso deve funcionar muito bem, dado que é no interior do $(document).ready(function() { ... }); bloco.

eu tenho isso funcionando no meu site.Eu simplesmente adicionado um id para a minha tag link onde meu css é carregado.e, em seguida, você alterar o attri href (você tem que parte direita).

HTML:

<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>

E eu uso um selecione para permitir que o usuário escolha a sua pele.

<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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top