JavaScript로 외부 스타일 시트를 삽입하는 방법 (동적)

... 올바른 경로 사용.JavaScript로 외부 스타일 시트를 삽입하는 방법 (동적)

예를 들면. foo.js.라는 스크립트가 있습니다. 나는 다음과 같은 명령으로 할 수있는 스타일 선언을 삽입하려는 :

$('head').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

문제 : 나는 스타일 시트 파일에 대한 전체 경로를 넣어해야합니다. 그래서 /template/foo.css 대신에 : http://hostname/directory/template/foo.css을 넣어야합니다. 정적으로 beacause 스크립트를 다른 서버와 다른 위치에 배치 할 수 없습니다. 즉, http://foo.com/bar/foo.css 또는 http://foo.com/foo.css 일 수 있습니다.

서버에서 foo.js 파일의 경로를 얻을 수 있다면 매우 유용 할 것입니다. 그때는 javascrpt의 파일을 기반으로 스타일 시트 위치를 설정할 수있는 충분한 beacause가 될 것입니다.

출처

2010-01-09 Bald

나는 TinyMCE가 그런 것을 알았다. – Bald

동일한 디렉토리와 같은 foo.js와 foo.css의 위치 사이에 명확한 관계가 있습니까? 아니면 html 페이지와 css 파일 사이에 있습니까? –

거기 CSS 파일을 찾을 수있는 논리의 일종입니까? –

$('body').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

대신 머리 의

아 ... 난 그냥 당신의 문제가 무엇인지 깨달았다 죄송합니다.

$('script').each(function(i,el){ 
    var path = el.src.match(/^(.+)\/foo.js$/); 
    if (path) { 
     $('body').append('<link rel="stylesheet" ' + 
           'href="' + path[1] + '/foo.css" ' + 
           'type="text/css" />' 
         ); 
    } 
})

출처

2010-01-09 15:52:32 slebetman

당신은'src' 속성을 가진'script' 요소만을 반복하기 위해'$ ('script [src]')'를 사용할 수 있습니다 ... – CMS

고맙습니다. 나는 또 다른 방법이 있다고 생각했다. 그러나 명백하게 :) :) 어쨌든, 감사합니다! – Bald

window.location을 사용하고 그 경로를 얻을 수 있습니다. 예를 들어이 페이지가 있습니다 : 난 항상했던

>>> window.location 
http://stackoverflow.com/questions/2033742/how-to-insert-external-stylesheet-in-javascript-dynamically

출처

2010-01-09 15:01:14

이렇게하면 css 파일 위치가 아닌 css가 포함 된 페이지의 위치 객체를 얻게됩니다. – Matias

이 내가 현재 스크립트 URL을 얻을하는 데 사용하는 일반적인 기술이다가 : 때 때문에

var scriptUrl = (function() { 
    var scripts = document.getElementsByTagName('script'), 
     script = scripts[scripts.length - 1]; 

    return script.src; 
})();

그것은 기본적으로 작동 한 전략은 DOM 자체에서 스크립트의 경로를 추출하는 것입니다 스크립트가 실행 중일 때 DOM에 마지막으로 script 태그가 있습니다.

출처

2010-01-09 15:53:13 CMS

JavaScript로 외부 스타일 시트를 삽입하는 방법 (동적)

답변

관련 문제