Question

我想使用变量sym来更改脚本在页面上的加载方式。如果我对src URL进行硬编码，我可以加载脚本，但我不能使用JavaScript在脚本标记的src属性中构建URL。

<script>
    var sym = "MSFT";
    document.write(sym);
</script>

<script src="http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX+MSFT&Output=JS"></script>
<!-- works -->

<script src="http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX+"+sym+"&Output=JS"></script>
<!--- does NOT work because I do not know how to insert the var correctly -->

Answer 1

如何将变量作为URL的一部分传递？

轻松！由于您不介意使用javascript，因此简单的解决方案如下

var scriptElement = document.createElement("script");
scriptElement.src = "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS";
document.head.appendChild(scriptElement);

此代码创建一个脚本元素，源为“http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=”+ encodeURIComponent（“$ SPX +”+ sym）+“＆amp; Output = JS”。然后它将它附加到网页的头部。

最终的HTML是：

<script>
    var sym = "MSFT";
    document.write("\<script src='" + "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS" + "'\>\</script\>");        
</script>

此解决方案无效的原因如下：

Codepen是一个HTTPS站点，这意味着它不会提供HTTP内容。说实话，我不知道为什么Codepen服务于HTTP脚本。如何解决这个问题？嗯，确实只有一个简单的解决方案：

不使用Codepen而是使用本地HTML文件而只是打开它，如果您有自己的HTTP服务器，则可以使用它。

快速操作指南：

1）打开文本编辑器

2）输入以下内容

<html>
    <head>
        <script>
            var sym = "MSFT";
            document.write("\<script src='" + "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS" + "'\>\</script\>");
        </script>
    </head>
    <body>
    </body>
</html>

3）现在点击“另存为”按钮并将其另存为.html文件

4）打开它！

5）玩得开心：）

Answer 2

你不能在HTML标记中使用Javascript变量 - 你必须在Javascript中完全自己创建脚本标记。例如：

<script>
var sym = "MSFT";
document.addEventListener('DOMContentLoaded', () => {
  document.head.appendChild(document.createElement('script'))
  .src = `http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX${sym}&Output=JS`;
});
</script>

如何在脚本标记的src中使用变量？

2 个答案: