Question

我有一个外部脚本，后跟我<body>底部的内联脚本。看起来内联脚本在外部脚本之前运行，根据这个答案，这不应该发生：

如果您没有动态加载脚本或将其标记为延迟或 async，然后脚本按页面中遇到的顺序加载。它是外部脚本还是内联脚本并不重要 - 它们按照页面中遇到的顺序执行。外部脚本之后的内联脚本将一直保留到在它们之前的所有外部脚本都已加载并运行。

Src：https://stackoverflow.com/a/8996894/114855

这是我的代码：

  <script src="https://checkout.stripe.com/checkout.js"></script>
  <script>
  var handler = StripeCheckout.configure({
    key: 'pk_live_HhFqemZFyEUJVorFzYvjUK2j',
    token: function(res) {
      $('#pay_token').val(res.id);
      $('#pay_email').val(res.email)
      $('#pay_amount').val(parseFloat($("#amount").val())*100);
      $('#pay_description').val($("#description").val());
      $('#pay_real').submit();
    }
  });

  /* .. */
  </script>

</body>

控制台显示未定义StripeCheckout（外部脚本应定义）

Console

这是有道理的，因为网络选项卡显示我的外部请求仍处于待处理状态。但我不确定为什么浏览器不等待checkout.js被提取：

Network

Answer 1

对所引用问题中的两个答案的评论表明，所接受的答案没有标准参考（适用于所有常见的浏览器版本）的支持，并且实际上可能并非一直适用于所有浏览器。

我可以确认这种行为。但是我们的反馈页面上有一些提示，它可能仅在缓存test.php时有效。你知道关于这个的任何规范/参考链接吗？

这个答案是不正确的。动态添加的脚本一旦被附加到文档＆＃34;就不会总是执行。有时候这是真的（例如对于旧版本的Firefox），但通常情况并非如此。如jfriend00的回答中所述，执行顺序不是确定的

为了完全安全，请在运行脚本之前等到DOM is fully rendered。

Answer 2

啊哈 - 我已经明白了！

这是运行TurboLinks的rails应用程序的一部分。

每次单击链接时，TurboLink都会动态更改正文内容，而不是创建新请求。这意味着我的脚本标签正在动态插入，并保证它们按顺序运行。

由于TurboLinks不会在每个请求中重新评估脚本标记，我认为这里最简单/最好的解决方案是在我的应用的每个页面上包含StripeCheckout（不仅仅是它需要的那个），在{{1}内}

我还认为TurboLinks可以通过找到按顺序运行脚本的方法来解决这个问题。我打算在他们的github上跟进一个问题，并在此相应更新。

脚本在Chrome中无序加载

2 个答案: