Question

在下列情况下，是否有人知道为什么onload事件不会在iPad上触发？我尝试过使用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!'); });

OnLoad事件未在iPad上动态附加<style>触发</style>

1 个答案: