javascript - 在使用 JS 渲染 DOM 之前更改脚本 src

Question

所以我的网站上有一个如下所示的代码

<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>

我想要做的是根据 url 参数将 t_mc= 的值更改为 kwk 之外的另一个值。一个例子是 www.somedomain.de/page?utm_source=email。当有人使用此参数进入一侧时，代码应如下所示:

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

它确实做到了这一点，但 kwk 仍然是传入的值，它并不存在于源代码中，仅存在于 chrome 开发人员工具的元素选项卡中。

不知何故，我相信在一切真正存在之前我需要更早地改变它......对吗？

if (window.location.search.indexOf('utm_source=') > -1) {
    function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var kwksource = getParameterByName('utm_source');

var scriptsrc = document.querySelector('.bonus-button script').getAttribute('src');

var scriptsrcbottom = document.querySelector('.bonus-button-bottom script').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));
} 

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

Answer 1

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

长答案:

当浏览器正在读取页面源代码并遇到<script>时标记，它会停止渲染页面加载并执行脚本并继续渲染。这是因为脚本可以使用各种方法创建 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')

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

总而言之，唯一可靠的解决方案是服务器端，这样脚本 URL 从页面加载开始就是正确的。