2013-01-16 3 views
0

헤더에 CSS 파일과 자바 스크립트 파일에 대한 상대적 참조가있는 간단한 웹 사이트가 있습니다. 절대 URL로 확장하고 "cdn"으로 접두사를 붙이는 방법이 있습니까? 페이지로드시 자동으로? 난 결국 필요한 것은자바 스크립트를 사용하는 cdn의 접두사 상대 경로

<link rel="stylesheet" type="text/css" href="css/default.css"> 
<link rel="stylesheet" type="text/css" href="css/the-tooltip.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="js/utf8.js" type="text/javascript"></script> 
<script src="js/sha1.js" type="text/javascript"></script> 
<script src="js/validatious.js" type="text/javascript"></script> 

여기

<link rel="stylesheet" type="text/css" href="http://cdn.mydomain.com/css/default.css"> 
<link rel="stylesheet" type="text/css" href="http://cdn.mydomain.com/css/the-tooltip.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://cdn.mydomain.com/js/utf8.js" type="text/javascript"></script> 
<script src="http://cdn.mydomain.com/js/sha1.js" type="text/javascript"></script> 
<script src="http://cdn.mydomain.com/js/validatious.js" type="text/javascript"></script> 

답변

1

당신이 모든 스크립트 요소에 접두사를 추가 할 수있는 방법은 다음과 같습니다 : 여기

내 현재 머리의 일부입니다

function appendPrefix(prefix) { 
    var scripts = document.getElementsByTagName('script'), 
     links = document.getElementsByTagName('link'), 
     foreach = Array.prototype.forEach; 
    foreach.call(scripts, function (s) { 
    if (s.src && (/(http|https)/).test(s.src)) { 
     s.src = prefix + s.src; 
    } 
    }); 
    foreach.call(links, function (l) { 
    if (s.src && (/(http|https)/).test(l.href)) { 
     l.href = prefix + l.href; 
    } 
    }); 
} 

appendPrefix('http://stackoverflow.com/'); 

스크립트는 순수 JavaScript이며 scriptlink 태그 모두에서 작동합니다. http://으로 시작하지 않는 linkscript 태그에만 접두사를 추가합니다.

+0

좋아요. 브라우저가 실제 파일을 가져 오기 전에 어떻게 든 실행되도록 할 수 있습니까? –

+0

로드가 시작되기 전에 실행할 수 없습니다. DOM 요소가 DOM 트리에있을 때로드가 시작되고 DOM 트리에 있기 전에 요소의 'href' 및'src' 속성을 바꿀 수 없습니다. –

-1

당신은 필요한 파일을 얻을 웹 서버 (예를 들어, 아파치 서버의 .htaccess) 및 브라우저의 설정 파일에 cdn.example.com/css/* 또는 cdn.example.com/js/*에 요청을 /css/* 또는 /js/*를 리디렉션 할 수 있습니다. 이 솔루션은 웹 서버에 부하를 줄 것입니다 (css 또는 js 파일을 전송하는 것만 큼). 따라서 cdn에 수동으로 경로를 작성하는 것이 가장 좋습니다.

+0

제안 해 주셔서 감사합니다.하지만로드 이외에 또 다른 큰 문제가 있습니다. 이것은 사실 처음부터 cdn에서 직접 자원을 요청하는 대신 사용자가 내 서버에 계속해서 연결하도록하고 다시 cdn합니다. 불행히도이 솔루션 cdn의 요점. –

+0

알지만 다른 자동화 된 솔루션은 없습니다. 클라이언트 측 (자바 스크립트)의 변경으로 문제가 해결되지 않았습니다. –

0

JS가 최상의 솔루션이 아닌 것처럼 보입니다. 대신 서버 측에서 PHP를 사용하여 문제를 해결했습니다. 글로벌 $ 접두어 변수를 정의하고이를 동적으로 생성 된 호스트 이름과 경로에 추가하여 절대 URL을 가져오고 스크립트의 이식성을 유지합니다.