2012-08-11 5 views
1

2 개의 URL을 포함하는 데이터를 반환하는 JavaScript 함수를 만들었습니다. 그리고 이것을 HTML 코드에 삽입하고 싶습니다.자바 스크립트 반환 값을 html로 삽입

반환 URL 값은

JavsScript이 파일입니다

http://www.domain.com/javascript.js 

CSS 파일

나뿐만 코드에 다음을 삽입해야
http://www.domain.com/buttons.css 

:

<link rel="stylesheet" type="text/css" href="return URL value" /> 
<script type="text/javascript" src="return URL value"></script> 

내가 어떻게 할 수 있습니까? 간단히 말해서, 동적은 .js 또는 .CSS 파일을로드하려면 http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml


에서 얻은 아래

감사

당신이 할 수있는 방법

답변

1

당신은 (또한 JS 등) 외부 CSS를로드 할 수있는 동적 파일 자바 스크립트를 사용하여. 자바 스크립트를 사용하여 적절한 <link> 요소를 만듭니다.

var url = computeUrl();      /* Obtain url    */ 
var link = document.createElement('link'); /* Create the link element */ 
    link.setAttribute('rel', 'stylesheet'); /* Set the rel attribute */ 
    link.setAttribute('type', 'text/css'); /* Set the type attribute */ 
    link.setAttribute('href', url);   /* Set the href to your url */ 

은 지금이 순간, 우리는 단지 요소

<link rel="stylesheet" type="text/css" href="your url"> 

만들었습니다 그리고 우리는 변수 var link에 저장했다. 끝나지 않았습니다. <link>은 아직 DOM의 일부가 아닙니다. 첨부해야합니다

var head = document.getElementsByTagName('head')[0]; /* Obtain the <head> element  */ 
head.appendChild(link);        /* Append link at the end of head */ 

그리고 끝납니다.

매우 유사한 방식으로 외부 JavaScript 자원을 동적으로 추가 할 수 있습니다. <link> 태그 대신 <script> 태그를 사용하십시오.

1

하나는, 그것은 의미 코드에서 제안 DOM 메서드를 사용하여 먼저 새로운 "SCRIPT"또는 "LINK"요소를 만들고 적절한 특성을 할당 한 다음 element.appendChild()를 사용하여 요소를 문서 트리의 원하는 위치에 추가합니다. 그것은 실제보다 훨씬 더 화려하게 들립니다. 모두가 함께 오는 방법을 볼 수 있습니다 :

function loadjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
} 
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) 
} 

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file 
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file 
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file 

을 당신은 당신이 사용하는 실제 js 코드를 제공하지 않은 것처럼, 분명, 자신의 코드에이 적응해야합니다. 하지만 기본적으로 2 URL을 얻을 때 loadjscssfile() 함수를 두 번 호출해야합니다.

0

쉽게 자바 스크립트를 사용하여 헤드 요소에 노드를 추가 할 수 있습니다

link=document.createElement('link'); 
link.href= your_css_href_function(); 
link.rel='stylesheet'; 
link.type='text/css'; 

document.getElementsByTagName('head')[0].appendChild(link); 

그리고 당신의 자바 스크립트 태그의 같은 :

script=document.createElement('script'); 
script.src= your_javascript_src_function(); 
script.type='text/javascript'; 

document.getElementsByTagName('head')[0].appendChild(script); 
관련 문제