Carregar dinamicamente link css externo, não estou conseguindo.

renan mafra · Maio 29, 2020

Eu tenho 2 arquivos CSS externos que contém backgrounds da página.

Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:

No HEAD:

No JS:

//////////////////////////////////////////////////////////////
// FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD  //     OK//
//////////////////////////////////////////////////////////////  
    function loadCSS(url){
        var link = document.createElement('link');
        link.setAttribute('href', url );
        link.setAttribute('rel', "stylesheet" );
        link.setAttribute('id', "key" );

        var para  = document.getElementsByTagName('head')[0]; //Nó pai HEAD
        var velho = document.getElementById('key');        //local exato do elemento a ser substituido

        para.replaceChild(link, velho);                      //Substituímos o velho pelo novo(link)
    }
//////////////////////////////
Chamada à função do webP
/////////////////////////////

WebpIsSupported(function(isSupported){
    if(isSupported){
       //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP
       loadCSS('arquivos_css/webp.css');
    }
}); 
//////////////////////////////////////////////////////////////  
// FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // 
//////////////////////////////////////////////////////////////
function WebpIsSupported(callback){
    if(!window.createImageBitmap){
        callback(false);
        return;
    }
    var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
    fetch(webpdata).then(function(response){
        return response.blob();
    }).then(function(blob){
        createImageBitmap(blob).then(function(){
            callback(true);
        }, function(){
            callback(false);
        });
    });
}

O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND

já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');

e não funciona....

o arquivo CSS externo contém backgrounds dentro do seletor HTML

tipo :

html {

background-image.....(1);

background-image.....(2);

background-image.....(3);

etc

}

eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –

o que pode estar acontecendo ? ?

Jack Oliveira · Maio 29, 2020

Não sei entende a pergunta direito mais tente colocar isso e veja se dará certo

<base href="https://meusite.com/"/>

Ex:

<!DOCTYPE HTML>
<html lang="pt_BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<base href="https://meusite.com/"/>