Question

我有一个静态脚本声明作为要求，一旦浏览器想要下载它，是否可以动态构建其URL？

<script async src='https://my-known-host.com/script.js?param1=<dynamicValue>'
</script>

此参数在客户端生成，并且我想说它只是一个随机数。

我想在客户端生成随机数据，因为服务器缓存页面，每次加载页面时，此请求都应该有一个唯一的随机数（即使是从缓存中）
我需要按顺序to start the download right away静态声明它（甚至在浏览器解析为声明行之前）

有可能吗？

Answer 1

是的，一种常见的方法是编写一个注入脚本标记的脚本。像这样：

<script type="text/javascript">

setTimeout(function(){
  var a = document.createElement("script");
  var b = document.getElementsByTagName("script")[0];

  // this adds some number, for example
  // you can tweak it to be a random number if you want
  a.src = document.location.protocol +
  "my-known-host.com/script.js?param1=" +
  Math.floor(new Date().getTime()/3600000);

  a.async = true;
  a.type = "text/javascript";
  b.parentNode.insertBefore(a,b)
}, 1);

</script>

我实际上是从分析提供商（crazyegg.com）获取此示例脚本，但Google Analytics也采用了类似的方法。换句话说，这很常见。

Answer 2

<head>
    <script>
            $("head").append($("<script>", {async: true, src: "test.js?params=" + Math.random()}));
    </script>
    <script async src="test.js?params=0.524902342"></script> <!-- parse-able result from the script below -->
</head>

抱歉，我提供了jQuery，但是这个或者一个普通的方法应该完成工作。诀窍是在head中运行JavaScript，将<script src="example.js?" + random></script>追加到head。

浏览器运行后，它会解析<script>标记末尾的参数化head。

我自己测试了一下，我的浏览器向test.js?params=0.3607864086033945

发出了请求

希望能解决它！

编辑：

如果您不希望script位于head的末尾，您也可以执行此操作。让浏览器先解析<script id="randScript" async></script>非常重要。

<script id="randScript" async></script>
<script>
    $("#randScript").prop("src", "test.js" + Math.random()); //jQuery
    document.getElementById("randScript").src = "test.js" + Math.random(); //vanilla
</script>

带有动态构造的网址

2 个答案: