브라우저에서 원본 CSS 파일 내용 가져 오기

Question

CSS 파일의 원시 내용을 가져 오는 방법이 있습니까?

CSS 파일에서 공급 업체 특정 CSS 속성을 가져오고 싶다고 상상해보십시오. 어떻게 든 CSS 내용을 잡고 그에 따라 파싱해야합니다. 또는 DOM을 사용하여 CSS 파일의 규칙에 액세스 할 수 있습니다.

DOM을 사용하는 동안 대부분의 브라우저 (< = IE8 제외)는 브라우저 엔진과 관련이없는 모든 사용자 정의 속성을 제거하는 경향이 있습니다 (webkit은 -moz 및 -o를 제거합니다). 및 -ms). 따라서 CSS 내용을 가져올 수 없습니다.

CSS 파일의 내용을 가져 오기 위해 AJAX를 사용하는 경우 해당 CSS 파일이 다른 도메인에서 호스팅되는 경우 동일한 원본 정책이 중단되고 CSS 내용을 가져올 수 없습니다.

크로스 도메인 AJAX 방식을 사용하는 경우 자바 스크립트 코드를 파싱하지 않기 때문에 작동하지 않는 JSONP 솔루션 만 제공됩니다 (따라서 콜백 없음).

내용을 가져 오는 다른 방법이 있습니까?

Answer 1

, 당신은 단지 CSS 파일에 끌어 AJAX를 사용할 수 있습니다

$.get("/path/to/the.css", function(data) {/* ... */}); 

그렇지 않을 경우, 사용을 시도 할 수 야후! 파이프를 프록시로 사용하고 JSONp를 사용하여 CSS를 가져옵니다.

구문 분석의 경우 Sizzle을 체크 아웃하여 선택기를 구문 분석 할 수 있습니다. CSS 문법 (CSS 표준에 게시 됨)을 사용하여 JS lex/yacc 파서를 사용하여 문서를 파싱 할 수도 있습니다. 나는 당신을 창조적 이도록 남겨 둘 것입니다.

행운을 빈다.

Answer 2

아니요, 거의 다 다루었습니다. IE가 아닌 브라우저는 style/currentStyle 개체와 document.styleSheets 인터페이스 모두에서 개체 모델의 알 수없는 규칙을 제거합니다. (대개 IE6-7의 CSS를 패치하고 싶습니다.)

외부 도메인에서 스타일 시트를 빨고 싶다면 프록시 지원 -AJAX가 필요합니다. 그리고 CSS를 파싱하는 것은 큰 불쾌한 일이 될 것입니다. 특히 브라우저의 단점을 복제해야하는 경우에 그렇습니다. 나는 그런 일을 격렬히 피할 것이다! CSS 파일은 당신이에 스크립트를 실행하는 페이지와 같은 도메인에있는 경우

Answer 3

JSONP는 눈을 다소 손상시킬 수 있지만 여전히 유효한 해결책입니다. 기본적으로 콜백 패딩 외에도 하나의 JSON 속성 인 "패딩"을 추가하고 CSS를 값으로 전달해야합니다. 예를 들어, 스크립트를 호출하면, http://myserver.com/file2jsonp/?jsonp=myCallback&textwrapper=cssContents이를 반환 할 수 :

myCallback("cssContents":"body{text-decoration:blink;}\nb{text-size:10em;}"); 

당신은 모든 줄 바꿈을 인코딩을 텍스트와 (기존 따옴표를 인코딩 후) 따옴표로 CSS 파일의 내용을 포장해야 할 것이다. Twitter XML 피드를 사용하여이 작업을 수행해야했습니다. 내가 그것을 만들었을 때 그것은 그런 끔찍한 생각처럼 느껴졌지만 그것의 일을했다.