移动 Safari、Chrome 和 Windows Safari 的 onLoad 问题答案

【问题标题】：onLoad issue with Mobile Safari, Chrome and Windows Safari移动 Safari、Chrome 和 Windows Safari 的 onLoad 问题
【发布时间】：2014-05-15 06:50:22
【问题描述】：

我正在尝试通过 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）。

另一种解决方案是在不等待 css 文件的情况下加载 html，但我不希望用户遇到 css 文件和 html 之间的同步问题（无样式的 html 变成有样式的 html）。

在 Safari（Windows、iPhone）和 Chrome（Android）中进行这项工作的最佳做法是什么？

【问题讨论】：

如果您在 android 中使用 WebView，它会将 html 页面用作 Web 服务并在加载 html 源代码后进行预缓存。它不提供动态js文件加载，我没有尝试动态加载css但我尝试动态加载js，它不起作用。
不，它不是 WebView。我指的是浏览器@erhan。

标签： javascript html browser safari onload

【解决方案1】：

这个问题的唯一跨浏览器解决方案似乎是检查 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。

【讨论】：