Dlaczego atrybut onload elementu linku jest niewiarygodny dla przeglądarek opartych na Androidzie?

Question

 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); 

Ten kod działa w przeglądarce Chrome/Firefox, a mimo to przeglądarki plików na moich urządzeniach Froyo (2.3) i Jellybean (4.1) nie wyświetlają żadnych informacji. Jaki jest problem? Chciałbym, jeśli mógłbym wykonać niektóre js na linku. Wszystko inne w moim przypadku oznaczałoby włamanie. :/

Problem nie jest innerHTML. Wypróbuj go z alertami, jeśli chcesz (na własne ryzyko).

Inna odpowiedź wspomina sprawdzania tej funkcji wykonując

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

..ale to prawda w obu przeglądarkach magazynie! wtf faceci?

Answer 1

Android przeglądarka nie obsługuje "onload"/"onreadystatechange" imprezy dla elementu: http://pieisgood.org/test/script-link-events/
ale zwraca:

"onload" in link === true 

Więc moje rozwiązanie jest wykrycie Android Browser z userAgent a następnie czekać na jakąś specjalną regułę css w twoim arkuszu stylów (np. reset dla marginesów "ciała").
Jeśli to nie Android przeglądarka i obsługuje "onload" Event- będziemy go używać:

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