모바일 Safari, Chrome 및 Windows Safari에서 onLoad 문제가 발생했습니다.

Question

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)에서 수행하는 가장 좋은 방법은 무엇입니까?

Answer 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로 설정합니다.