2012-08-11 75 views
1

我已經創建了一個JavaScript函數,它將返回包含2個URL的數據。我想將這些插入到HTML代碼中。插入javascript返回值到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> 

我怎麼能這樣做?

感謝

回答

1

您可以加載外部CSS(和JS)動態文件使用javascript。只需使用javascript創建適當的<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資源。只需使用<script>標籤而不是<link>標籤。

1

一個你可以做的方式,建議在下面的代碼片段從http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml


獲得要加載的.js或者.css文件動態,概括地說,這意味着使用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

您可以使用JavaScript輕鬆添加到head元素節點:

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

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

與同爲你的JavaScript代碼:

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

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