使用 JS 变量设置 <script> 标签的 src 属性

Posted 2023-02-26

【中文标题】使用 JS 变量设置 <script> 标签的 src 属性

【英文标题】：Use JS variable to set the src attribute for <script> tag

【发布时间】：2012-06-24 09:51:34

【问题描述】：

我想使用一个 javascript 变量作为同一个 jsp 上另一个标签的“src”属性。

<script>
var link = mylink // the link is generated based on some code
</script>

我想创建这个新元素，如下所示。

<script src="mylink">
</script>

在搜索各种论坛时，我尝试使用以下选项，但它们似乎不起作用。我希望这个东西可以在所有主流浏览器上运行。

将此代码放在第一个元素中。

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/somelink";
document.body.appendChild(script);

在第一个元素中使用文档写入方法。

document.write("<script type='text/javascript' src="+ google.com + "><\/script>");

试图在第一个元素中设置一个 JSTL 变量并使用它。

<c:set var="URL" value="mylink"/>

这些方法都没有成功。对出了什么问题有什么建议吗？

【问题讨论】：

有一个流行的脚本加载实用程序，叫做 require.js。它通过使同步调用异步来优化脚本加载和依赖关系。这可能很有趣。

如果您得到答案，您应该接受其中一种解决方案。 :) 或提供您认为有用的答案。

【参考方案1】：

虽然 CDATA 可以正常工作，但使用 document.createElement 也是一个不错的选择。尤其是如果您打算向 URL 附加一些值，例如缓存清除。

<script type="text/javascript"> 
    var JSLink = "/Folder/sub_folder/version.js?version=" + Math.random();
    var JSElement = document.createElement('script');
    JSElement.src = JSLink;
    JSElement.onload = OnceLoaded;
    document.getElementsByTagName('head')[0].appendChild(JSElement);

    function OnceLoaded() 
        // Once loaded.. load other JS or CSS or call objects of version.js
    
</script>

代码很好.. :)

【讨论】：

如果我需要加载多个 js 文件怎么办。是否有特定的语法，还是我必须循环整个脚本？谢谢！！

循环整个脚本。您编写的任何代码基本上都会这样做。抱歉回复晚了。

我试过了，它可以工作，但不如预期。在我的情况下，源脚本只是一个长文本变量、照片列表等，但是当在常驻脚本中调用该变量时，该变量为空……除非……我在其中插入一个“警报”语句。似乎必须在变量获取字符串之前触发一些事件。有什么想法吗？我在此处发布了问题 (***.com/questions/54583628/…)，但所有回复都是关于离题的问题。

【参考方案2】：

我使用类似于选择二的东西。您的代码中有一个小错误，因为“google.com”需要用引号括起来。

为了提高兼容性，你可能想把它写成：

document.write("<script type='text/javascript' src='"+ x + "'><\/scr" + "ipt>");

在这种情况下，x 将是要包含的文件。您可以将其定义为：

var x = "http://google.com/script.js";

或

var x = "path/to/script.js";

【讨论】：

我用引号尝试过这种方式，但它不起作用，看不到源代码中添加的脚本。另外，不明白你为什么说我们需要像 "'>" 那样做？为什么我们在这里连接有什么意义？

某些浏览器，尤其是旧版本的 Internet Explorer，认为这是 <script> 标记的结尾，并停止将剩余代码作为 JavaScript 处理。

【参考方案3】：

你会使用 jQuery 吗？如果是这样，您可以使用getScript():

http://api.jquery.com/jQuery.getScript/

$.getScript(mylink, function() 
   // do something using the JS that was loaded.
);

【参考方案4】：

试试：

(function(d)
     var file = 'yourJS.js';
     var ref = d.getElementsByTagName('script')[0];
     var js = d.createElement('script');
     js.src = file;
     ref.parentNode.insertBefore(js, ref);
(document));

这是做什么的：

找到页面上的第一个脚本元素 使用您提供的源创建一个新的脚本元素。 然后在第一个现有脚本元素之前插入该新元素。

【参考方案5】：

<xsl:variable name="Path" select="/root/folder/"></xsl:variable> <!-- Global path variable. -->
<xsl:variable name="myScriptPath" select="concat($Path, 'myScript.js')"></xsl:variable> <!-- Relative script path variable. -->
<script src="$myScriptPath"/> <!-- Attach script. -->