Perché l'attributo onload dell'elemento link non è affidabile per i browser azionari Android?

 var style1 = document.createElement("link"); 
     style1.id = "rel"; 
     style1.rel = "stylesheet"; 
     style1.href = "http://www.mysite.com/css.css"; 
     style1.onload = function(){document.body.innerHTML+="fffffff";}; 
     document.getElementsByTagName("head")[0].appendChild(style1);

Questo codice funziona in Chrome/Firefox, eppure i browser di serie sui dispositivi Android Froyo (2.3) e Jellybean (4.1) non stamperanno nulla. Qual è il problema? Mi piacerebbe se potessi eseguire qualche j su onload di un link. Qualsiasi altra cosa nel mio caso equivale a un hack. :/Perché l'attributo onload dell'elemento link non è affidabile per i browser azionari Android?

Il problema non è innerHTML. Provalo con avvisi se vuoi (a tuo rischio e pericolo).

Un'altra risposta menzioni il controllo di questa funzionalità facendo

var huh = 'onload' in document.createElement('link');

..ma questo è vero in entrambi i browser magazzino! ragazzi?

fonte

2012-12-19 Amalgovinus

ne dite di usare [vero e proprio evento di ascolto] (https: //developer.mozilla. org/en-US/docs/DOM/element.addEventListener) piuttosto che la spazzatura DOM0? –

Questo non ha funzionato per i dispositivi mobili dopo aver aggiunto il collegamento al dom (nessun errore, il foglio di stile non viene mai caricato): document.getElementById ("my_rel"). AddEventListener ('load', prepClasses, false); – Amalgovinus

Android browser non supporta i "onload"/eventi "onreadystatechange" per elemento: http://pieisgood.org/test/script-link-events/
ma restituisce:

"onload" in link === true

Quindi, la mia soluzione è quella di rilevare i browser di Android da userAgent e poi aspettare alcune regole CSS speciali nel tuo foglio di stile (ad esempio, reset per i margini "body").
Se non è il browser Android e supporta "onload" event- lo useremo:

var userAgent = navigator.userAgent, 
    iChromeBrowser = /CriOS|Chrome/.test(userAgent), 
    isAndroidBrowser = /Mozilla\/5.0/.test(userAgent) && /Android/.test(userAgent) && /AppleWebKit/.test(userAgent) && !iChromeBrowser; 

addCssLink('PATH/NAME.css', function(){ 
    console.log('css is loaded'); 
}); 

function addCssLink(href, onload) { 
    var css = document.createElement("link"); 
    css.setAttribute("rel", "stylesheet"); 
    css.setAttribute("type", "text/css"); 
    css.setAttribute("href", href); 
    document.head.appendChild(css); 
    if (onload) { 
     if (isAndroidBrowser || !("onload" in css)) { 
      waitForCss({ 
       success: onload 
      }); 
     } else { 
      css.onload = onload; 
     } 
    } 
} 

// We will check for css reset for "body" element- if success-> than css is loaded 
function waitForCss(params) { 
    var maxWaitTime = 1000, 
     stepTime = 50, 
     alreadyWaitedTime = 0; 

    function nextStep() { 
     var startTime = +new Date(), 
      endTime; 

     setTimeout(function() { 
      endTime = +new Date(); 
      alreadyWaitedTime += (endTime - startTime); 
      if (alreadyWaitedTime >= maxWaitTime) { 
       params.fail && params.fail(); 
      } else { 
       // check for style- if no- revoke timer 
       if (window.getComputedStyle(document.body).marginTop === '0px') { 
        params.success(); 
       } else { 
        nextStep(); 
       } 
      } 
     }, stepTime); 
    } 

    nextStep(); 
}

Demo: http://codepen.io/malyw/pen/AuCtH

fonte

2014-01-21 09:28:13

Perché l'attributo onload dell'elemento link non è affidabile per i browser azionari Android?

risposta

Problemi correlati