on移動Safari，Chrome和Windows Safari的onLoad問題

我試圖通過DOM操作將HTML的一部分嵌入到網站。所以我第一次加載CSS，然後加載HTML。這是我的代碼;on移動Safari，Chrome和Windows Safari的onLoad問題

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 +，火狐，Chrome，歌劇（在Linux，Mac，Windows）中，Safari瀏覽器（蘋果，iPad的）。但它不適用於Safari（Windows，iPhone）和Chrome（Android）。

另一種解決方案是加載html而不等待css文件，但我不希望用戶遇到css文件和html之間的同步問題（未轉換爲html的樣式）。

在Safari（Windows，iPhone）和Chrome（Android）中完成此項工作的最佳做法是什麼？

來源

2014-04-03 erdimeola

如果您在adroid中使用WebView，那麼在加載html源文件後，它將使用html頁面作爲Web服務和預緩存。它不提供動態js文件加載，我還沒有嘗試動態加載css，但我試圖動態加載js，它不起作用。 – erhan

不，它不是一個WebView。我指的是瀏覽器@erhan。 – erdimeola

這個問題的唯一交叉瀏覽器解決方案似乎檢查document.styleSheets數組，以查看是否已加載或不在間隔中設置標誌。所以解決的辦法是，

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

我將module_loaded設置爲true，如果調用load_module（）函數。

來源

2014-04-07 12:49:17 erdimeola

我使用Google搜索的最佳答案。 –

on移動Safari，Chrome和Windows Safari的onLoad問題

回答

相關問題