Javascript 在使用JS呈现DOM之前更改脚本src

所以我在我的网站上有一个类似这样的代码

<div class="bonus-button">
    <script language="javascript" type="text/javascript" src="https://somedomain.de/widget/button/PSIG2ng?skin=134&t_mc=kwk&btn=rec_company"></script>
</div>

它确实是这样做的，但仍然是通过

kwk

得到的值，它不存在于源代码中，只存在于chrome开发工具的elements选项卡中

不知何故，我相信我需要在一切都真正出现之前尽早改变它。。。对吧?

if（window.location.search.indexOf（'utm_source='）>-1）{
函数getParameterByName（名称、url）{
如果（！url）url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&'）；
var regex=new RegExp（'[？&]'+name+'（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回组件（结果[2]。替换（/\+/g'）；
}
var kwksource=getParameterByName（'utm_source'）；
var scriptsrc=document.querySelector（'.bonus按钮脚本'）.getAttribute（'src'）；
var scriptsrcbooth=document.querySelector（'.bonus按钮底部脚本'）.getAttribute（'src'）；
document.querySelector（'.bonus button script'）.setAttribute（'src'，scriptsrc.split（'t_mc=kwk'）.join（'t_mc='+kwksource））；
document.querySelector（'.bonus button bottom script'）.setAttribute（'src'，scriptsrcbottom.split（'t_mc=kwk'）.join（'t_mc='+kwksource））；
}

---

简短回答：这是不可能的。

长答案：

当浏览器读取页面源代码并遇到

标记时，它会停止呈现页面，并执行脚本并继续呈现。这是因为脚本可能会使用各种方法创建DOM节点，如

document.write

等（一个

defer

属性可能会改变这一点）

因此，如果您想要创建一个脚本，该脚本应该在加载和执行另一个脚本标记之前更改其url，那么它需要显示在源代码中该脚本标记的前面。但就在这个脚本执行的时刻，要修改的脚本还没有被解析，因此它不是DOM的一部分，因此完全可以访问

另一方面，如果修改另一个脚本标记的url的脚本正好出现在源代码中，则前面的脚本已经加载并执行，因此修改太晚了

因此，更改给定脚本的源url的唯一方法是在它出现在DOM中之后，如下所示：

[...document.querySelectorAll('script[src]')]
  .find(s => <some test to identify the script>)
  .setAttribute('src', 'the new value')

[…document.querySelectorAll（'script[src]'）]
.find（s=>）
.setAttribute（'src'，'新值'）

将导致重新加载脚本。但这不会对DOM进行任何更改，也不会删除任何事件侦听器等，换句话说，也不会进行任何清理

---

总而言之，唯一可靠的解决方案是服务器端，这样脚本url就可以从页面加载的一开始就显示出来。

简短回答：这是不可能的。

长答案：

当浏览器读取页面源代码并遇到

标记时，它会停止呈现页面，并执行脚本并继续呈现。这是因为脚本可能会使用各种方法创建DOM节点，如

document.write

等（一个

defer

属性可能会改变这一点）

因此，如果您想要创建一个脚本，该脚本应该在加载和执行另一个脚本标记之前更改其url，那么它需要显示在源代码中该脚本标记的前面。但就在这个脚本执行的时刻，要修改的脚本还没有被解析，因此它不是DOM的一部分，因此完全可以访问

另一方面，如果修改另一个脚本标记的url的脚本正好出现在源代码中，则前面的脚本已经加载并执行，因此修改太晚了

因此，更改给定脚本的源url的唯一方法是在它出现在DOM中之后，如下所示：

[...document.querySelectorAll('script[src]')]
  .find(s => <some test to identify the script>)
  .setAttribute('src', 'the new value')

[…document.querySelectorAll（'script[src]'）]
.find（s=>）
.setAttribute（'src'，'新值'）

将导致重新加载脚本。但这不会对DOM进行任何更改，也不会删除任何事件侦听器等，换句话说，也不会进行任何清理

---

总而言之，唯一可靠的解决方案是服务器端，这样脚本url就可以从页面加载的一开始就显示出来。

我认为不实际更改

标记本身是不可能的-在初始DOM响应中发送的内容无论发生什么都会被解析（除非调用

window.stop（）

）这是不可能的，在解析元素之前不能引用它。如果你需要一个动态的src，那么也可以动态创建脚本标记。所以你说一种可能是根据参数是否存在等来更改src，然后在页面上实现它？我不确定“在页面上实现它”到底是什么意思。无论如何，如果需要动态

src

，就不能将脚本标记硬编码到HTML。相反，使用脚本创建脚本标记，并使用您需要的任何参数来定义该脚本的

src

属性的值。然后将新创建的脚本标记附加到页面主体。我认为不实际更改

标记本身是不可能的-在初始DOM响应中发送的某些内容将得到解析，无论发生什么情况（除非调用

window.stop（）

），都是不可能的，您只是无法在解析之前引用元素。如果你需要一个动态的src，那么也可以动态创建脚本标记。所以你说一种可能是根据参数是否存在等来更改src，然后在页面上实现它？我不确定“在页面上实现它”到底是什么意思。无论如何，如果需要动态

src

，就不能将脚本标记硬编码到HTML。相反，使用脚本创建脚本标记，并使用您需要的任何参数来定义该脚本的

src

属性的值。然后将新创建的脚本标记附加到