首页 文章

移动Safari，Chrome和Windows Safari的onLoad问题

提问于
浏览 次
0

我试图通过DOM操作将html的一部分嵌入到网站中 . 所以我首先加载css，然后加载HTML . 这是我的代码;

function load_css () {
     var css_file = document.createElement("link");
     css_file.rel = "stylesheet";
     css_file.type = "text/css";
     css_file.href = "http://domain/path/to/css";
     if (css_file.readyState) {
         css_file.onreadystatechange = function () {
              if (css_file.readyState === "loaded" || css_file.readyState === "complete") {
                  css_file.onreadystatechange = null;
                  load_module();//ajax call to embed html
              }
         };
     } else {
         css_file.onload = function () {
            load_module();//ajax call to embed html
         };
     }
     document.getElementsByTagName("head")[0].appendChild(css_file);
 }

这适用于IE8，Firefox，Chrome，Opera（Linux，Mac，Windows），Safari（Mac，iPad） . 但它不适用于Safari（Windows，iPhone）和Chrome（Android） .

替代解决方案是加载html而不等待css文件，但我不希望用户遇到css文件和html之间的同步问题（没有样式的html变成样式的） .

在Safari（Windows，iPhone）和Chrome（Android）中使用此功能的最佳做法是什么？

javascript html browser safari onload

1 回答

  • 2

    针对此问题的唯一crossbrowser解决方案似乎检查document.styleSheets数组以查看是否已在间隔中加载css并设置标志 . 所以解决方案是;

    var module_loaded=false;
function load_css () {
    var css_link = "domain/path/css"
    var css_file = document.createElement("link");
    css_file.rel = "stylesheet";
    css_file.type = "text/css";
    css_file.href = css_link;
    var loaded = false;
    if (css_file.readyState) {
        css_file.onreadystatechange = function () {
            if (css_file.readyState === "loaded" || css_file.readyState === "complete") {
                css_file.onreadystatechange = null;
                loaded = true;
                load_module();
            }
        };
    } else {
        css_file.onload = function () {
            loaded = true;
            load_module();
        };
    }
    document.getElementsByTagName("head")[0].appendChild(css_file);
    var ti = setInterval(function() {
        if (module_loaded) {
            loaded = true;
            clearInterval(ti);
        }
        if (!loaded) {
            for (var i = 0 ; i < document.styleSheets.length; i++) {
                if (document.styleSheets[i].href == css_link) {
                    loaded = true;
                    clearInterval(ti);
                    load_module();
                }
            }
        }
    }, 100);
}

    如果调用load_module（）函数，我将module_loaded设置为true .

    回复于

相关问题