Question

我创建了一个JavaScript函数，它将返回包含2个URL的数据。我想将这些插入到HTML代码中。

e.g。返回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>

我该怎么做？

由于

Answer 1

下面从http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

获取的代码段中建议了其中一种方法。

要动态加载.js或.css文件，简而言之，这意味着使用DOM方法首先创建一个时髦的新“SCRIPT”或“LINK”元素，为其分配适当的属性，最后使用元素。 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 loadjscssfile()时，你需要调用URL函数两次。

Answer 2

您可以使用javascript动态加载外部css（以及js）文件。只需使用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>代码。

Answer 3

您可以使用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);

将javascript返回值插入html

3 个答案: