Tại sao thuộc tính tải trọng của phần tử liên kết không đáng tin cậy cho các trình duyệt kho Android?

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

Mã này hoạt động trong Chrome/Firefox và các trình duyệt cổ phiếu trên thiết bị Android Froyo (2.3) và Jellybean (4.1) Android của tôi sẽ không in được gì. Có chuyện gì vậy? Tôi muốn nếu tôi có thể thực hiện một số js onload của một liên kết. Bất cứ điều gì khác sẽ trong trường hợp của tôi số tiền để hack. :/

Sự cố không phải là innerHTML. Hãy thử nó với các cảnh báo nếu bạn muốn (với sự nguy hiểm của chính bạn).

câu trả lời khác đề cập đến kiểm tra các chức năng này bằng cách làm

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

..nhưng điều này là đúng trong cả hai trình duyệt kho! wtf guys?

Answer 1

trình duyệt Android không hỗ trợ "onload"/"onreadystatechange" sự kiện cho các phần tử: http://pieisgood.org/test/script-link-events/
Nhưng nó sẽ trả về:

"onload" in link === true 

Vì vậy, giải pháp của tôi là để phát hiện trình duyệt Android từ UserAgent và sau đó chờ cho một số quy tắc css đặc biệt trong biểu định kiểu của bạn (ví dụ: đặt lại cho lề "cơ thể").
Nếu nó không phải là trình duyệt Android và nó hỗ trợ "onload" event- chúng tôi sẽ sử dụng nó:

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