Javascript를 사용하여 CSS 파일을로드하는 방법은 무엇입니까?
Javascript를 사용하여 CSS 스타일 시트를 HTML 페이지로 가져올 수 있습니까? 그렇다면 어떻게 할 수 있습니까?
추신 : 자바 스크립트는 내 사이트에서 호스팅되지만 사용자가 <head>웹 사이트 의 태그 를 넣을 수 있기를 원하며 서버에서 호스팅 된 CSS 파일을 현재 웹 페이지로 가져올 수 있어야합니다. (css 파일과 javascript 파일 모두 내 서버에서 호스팅됩니다).
여기에 "오래된 학교"방식이 있습니다. 모든 브라우저에서 잘 작동합니다. 이론적으로, setAttribute불행히도 IE6는 일관되게 지원하지 않습니다.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
이 예제는 CSS가 이미 추가되었는지 확인하여 한 번만 추가합니다.
해당 코드를 자바 스크립트 파일에 넣고 최종 사용자가 단순히 자바 스크립트를 포함하도록하고 CSS 경로가 절대 서버에로드되도록하십시오.
바닐라 JS
다음은 일반 자바 스크립트를 사용 head하여 URL의 파일 이름 부분을 기반으로 요소에 CSS 링크를 삽입하는 예입니다 .
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
닫는 head태그 바로 앞에 코드를 삽입하면 페이지가 렌더링되기 전에 CSS가로드됩니다. 외부 JavaScript ( .js) 파일을 사용하면 스타일이 지정되지 않은 콘텐츠 ( FOUC ) 의 플래시 가 나타납니다.
jquery를 사용하는 경우 :
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
이 스크립트와 같은 것이 가능하다고 생각합니다.
<script type="text/javascript" src="/js/styles.js"></script>
이 JS 파일에는 다음 명령문이 포함되어 있습니다.
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');
자바 스크립트와 CSS의 주소는 사이트를 참조하려면 절대적이어야합니다.
많은 "CSS 가져 오기 기술은이 분기 기술을 사용하여 CSS 해킹을 거부" 기사에서 설명합니다.
그러나 "JavaScript를 사용하여 포틀릿 CSS 스타일 시트를 동적으로 추가" 기사에서는 CreateStyleSheet 가능성 (IE의 독점 메소드)도 언급합니다.
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
}
else {
var styles = "@import url(' http://server/stylesheet.css ');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
CSS 또는 JavaScript 파일을 동적으로로드하려면 다음 함수를 호출하십시오.
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //if filename is a external JavaScript file
// alert('called');
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
alert('called');
} else if (filetype == "css") { //if filename is an external CSS file
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
이름을 filename인수 로 사용하여 전체 파일 경로를 전달하십시오.
Element.insertAdjacentHTML 은 브라우저를 매우 잘 지원하며 한 줄에 스타일 시트를 추가 할 수 있습니다.
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
나는 이것이 꽤 오래된 실이라는 것을 알고 있지만 여기에 5 센트가 온다.
필요에 따라이를 수행하는 다른 방법이 있습니다.
CSS 파일을 한동안 만 활성화하려는 경우가 있습니다. CSS 전환처럼. CSS를 활성화 한 다음 다른 이벤트 후에이를 비활성화하십시오.
CSS를 동적으로로드 한 다음 제거하는 대신 새 CSS의 모든 요소 앞에 클래스 / ID를 추가 한 다음 CSS 기본 노드의 해당 클래스 / ID를 body 태그와 같이 전환하면됩니다.
이 솔루션을 사용하면 처음에 더 많은 CSS 파일이로드되지만 CSS 레이아웃을 전환하는보다 동적 인 방법이 있습니다.
스타일 자체가로드 될 때까지 알고 (또는 기다리려면) 다음과 같이 작동합니다.
// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)
let fetchStyle = function(url) {
return new Promise((resolve, reject) => {
let link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.onload = function() { resolve(); console.log('style has loaded'); };
link.href = url;
let headScript = document.querySelector('script');
headScript.parentNode.insertBefore(link, headScript);
});
};
최신 브라우저에서는 다음 promise과 같이 사용할 수 있습니다 . 약속이있는 로더 함수를 작성하십시오.
function LoadCSS( cssURL ) {
// 'cssURL' is the stylesheet's URL, i.e. /css/styles.css
return new Promise( function( resolve, reject ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.href = cssURL;
document.head.appendChild( link );
link.onload = function() {
resolve();
console.log( 'CSS has loaded!' );
};
} );
}
그런 다음 CSS 가로 드 된 후에 무언가를 원합니다. CSS가 다음과 같이로드 된 후에 실행해야하는 함수를 호출 할 수 있습니다.
LoadCSS( 'css/styles.css' ).then( function() {
console.log( 'Another function is triggered after CSS had been loaded.' );
return DoAfterCSSHasLoaded();
} );
작동 방식을 심층적으로 이해하려는 경우 유용한 링크 :
이 코드를 사용하십시오 :
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);
요청에 따라 CSS 및 JS 파일을 동기화 및 동기화하는 일반 jquery 플러그인이 있습니다. 또한 이미로드 된 것을 추적합니다 :) 참조 : http://code.google.com/p/rloader/
jQuery의 요소 생성 방법 (내 환경 설정)과 콜백을 사용하는 방법은 다음과 같습니다 onLoad.
var css = $("<link>", {
"rel" : "stylesheet",
"type" : "text/css",
"href" : "style.css"
})[0];
css.onload = function(){
console.log("CSS IN IFRAME LOADED");
};
document
.getElementsByTagName("head")[0]
.appendChild(css);
YUI 라이브러리는 당신이 찾고있는 무엇을 수 있습니다. 또한 크로스 도메인 로딩을 지원합니다.
jquery를 사용하는 경우이 플러그인 은 동일한 작업을 수행합니다.
이 YUI 라이브러리에 사용 하거나이 기사를 사용 하여 구현할 수 있습니다.
JS 및 / 또는 CSS를로드하는 데 사용하는 전체 코드 아래
function loadScript(directory, files){
var head = document.getElementsByTagName("head")[0]
var done = false
var extension = '.js'
for (var file of files){
var path = directory + file + extension
var script = document.createElement("script")
script.src = path
script.type = "text/javascript"
script.onload = script.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true
script.onload = script.onreadystatechange = null // cleans up a little memory:
head.removeChild(script) // to avoid douple loading
}
};
head.appendChild(script)
done = false
}
}
function loadStyle(directory, files){
var head = document.getElementsByTagName("head")[0]
var extension = '.css'
for (var file of files){
var path = directory + file + extension
var link = document.createElement("link")
link.href = path
link.type = "text/css"
link.rel = "stylesheet"
head.appendChild(link)
}
}
(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();
(() => loadStyle('styles/', ['index'])) ();
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")
나는 thymeleaf를 사용하고 있으며 이것은 잘 작동합니다. 감사
참고 URL : https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript
'Programing' 카테고리의 다른 글
| 뷰에서 여러 모델 (0) | 2020.03.19 |
|---|---|
| 결과가 비어있을 때 LINQ는 무엇을 반환합니까? (0) | 2020.03.19 |
| 사전에 사전을 추가 하시겠습니까? (0) | 2020.03.19 |
| C에서 >>> = 연산자는 무엇입니까? (0) | 2020.03.19 |
| 자바 스크립트에 객체가 있는지 확인 (0) | 2020.03.19 |