एंड्रॉइड स्टॉक ब्राउज़र के लिए लिंक तत्व की ऑनलोड विशेषता अविश्वसनीय क्यों है?

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

यह कोड क्रोम/फ़ायरफ़ॉक्स में काम करता है, और फिर भी मेरे फ्रायओ (2.3) और जेलीबीन (4.1) पर स्टॉक ब्राउज़र कुछ भी प्रिंट नहीं करेंगे। समस्या क्या है? मैं चाहूंगा कि मैं किसी लिंक के कुछ जेएस अधिभार निष्पादित कर सकता हूं। मेरे मामले में कुछ और हैक की राशि होगी। :/

समस्या आंतरिक HTML नहीं है। अगर आप चाहें तो अलर्ट के साथ आज़माएं (अपने जोखिम पर)।

एक और जवाब

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

कर ..लेकिन यह दोनों स्टॉक ब्राउज़रों में सच है द्वारा इस कार्यक्षमता के लिए जाँच का उल्लेख है! wtf दोस्तों?

Answer 1

Android ब्राउज़र "ऑनलोड"/"onreadystatechange" तत्व के लिए घटनाओं का समर्थन नहीं करता: http://pieisgood.org/test/script-link-events/
लेकिन यह रिटर्न:

"onload" in link === true 

तो, मेरे समाधान userAgent से Android ब्राउज़र का पता लगाने और उसके बाद के लिए इंतजार करना है आपके स्टाइलशीट में कुछ विशेष सीएसएस नियम (उदाहरण के लिए, "बॉडी" मार्जिन के लिए रीसेट करें)।
यदि यह Android ब्राउज़र नहीं है और यह "ऑनलोड" घटना हम इसे उपयोग करेगा समर्थन करता है:

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

डेमो: http://codepen.io/malyw/pen/AuCtH