1

我创建了一个 JavaScript 函数，它将返回包含 2 个 URL 的数据。我想将这些插入到 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>

我怎样才能做到这一点？

谢谢

4

3 回答 3

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 时，您将需要调用该loadjscssfile()函数两次URL。

于 2012-08-11T19:46:46.740 回答
1

您可以使用 javascript 动态加载外部 css（以及 js）文件。只需<link>使用 javascript 创建适当的元素。

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>标签。

于 2012-08-11T19:47:42.953 回答
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);
于 2012-08-11T19:47:31.060 回答