更改脚本“src”通过 URL 参数并使其起作用

Question

我在想是否可以在静态网站上执行此操作，
我有 的链接

https://www.example.com?year=2022&week=05

，主要 HTML 是

<h4 style="color:#FFD700"><strong>TITLE</strong><br></h1>
                        <h3 id="1testing"></h3>
                        <h6 id="2testing"></h6>

// skipped

<script id="results" src="path/to/script/202205.txt"></script>

现在，我想让它根据 URL 参数进行更新，我有一个 URL 参数（并更新上面的代码），

const queryString = window.location.search;
                console.log(queryString);
                const urlParams = new URLSearchParams(queryString);
                const yrs = urlParams.get('year')
                const wks = urlParams.get('week')
                console.log(yrs);
                console.log(wks);
                document.getElementById('results').src = "path/to/script/" + yrs + "/" + wks + ".txt"

txt 文件的格式是

document.getElementById("date").innerHTML =// date
"date";
            
// Number 1
document.getElementById("1testing").innerHTML =// 1testing
"1testing";
document.getElementById("2testing").innerHTML =// 2testing
"2testing";

//so on...

但是，我遇到的麻烦是，src 标签在加载后更新，内容根本没有更新，可能是因为脚本不按顺序，但是我对此了解不多，任何人都可以帮助解决这个问题？

Answer 1

我认为您应该删除脚本标签并重新添加更新的标签。

  let oldScriptTag = document.getElementById('results');

  let newScriptTag = document.createElement('script');
  newScriptTag.id = 'results';
  newScriptTag.src = 'path/to/script/' + yrs + '/' + wks + '.js';
  newScriptTag.textContent = '//script';

  var body = document.getElementsByTagName('body')[0];

  oldScriptTag.remove();

  body.appendChild(newScriptTag);