javascript - iPad 上动态附加的 <style> 不触发 OnLoad 事件

Question

有人知道为什么在以下情况下 iPad 上不会触发 onload 事件吗？我试过使用 jQuery $.load() 和纯 javascript 但仍然无济于事。我的 google-fu 不足以找到答案:(

var head = document.head || document.getElementsByTagName('head')[0];
var linkEl = document.createElement('link');
linkEl.type = 'text/css';
linkEl.rel = 'stylesheet';
linkEl.href = "my_stylesheet.css"; 

// This doesn't work on ipad
linkEl.onload = function() {
    alert('css is loaded');
}

head.appendChild(linkEl);

演示:http://jsfiddle.net/cYFYE/

Answer 1

我知道FireFox 和Safari 没有load链接样式表的事件，因此 iOS Safari 可能也没有。我个人通过对样式表发出 ajax 请求来解决这个问题，然后将响应放在 <style> 中。标签。

我已经更新了你的 jsFiddle:http://jsfiddle.net/rgthree/cYFYE/2/

function loadCss(src, callback){
    jQuery.ajax({
        url: src,
        success: function(response){
          // Create Stylesheet
          var style = document.createElement('style');
          style.type = 'text/css';
          style.media = 'screen';
          if(style.styleSheet){
            style.styleSheet.cssText = response;
          }else{
            style.appendChild(document.createTextNode(response));
          }
          document.head.appendChild(style);
          callback && callback();
        }
    });
}
loadCss('/css/normalize.css', function(){ alert('loaded!'); });