编写超链接，以便加载 html 文件，但 js 文件的内部链接发生更改答案

【问题标题】：Write hyperlink so that an html file loads but internal link to js file changes编写超链接，以便加载 html 文件，但 js 文件的内部链接发生更改
【发布时间】：2020-11-28 07:48:27
【问题描述】：

这是一个普遍的问题，我已经搜索了高和低无济于事，非常感谢任何输入。

我有一个 html/javascript 教育测验，它加载一个单独的 js 文件来检索一个数组以确定测验的内容。例如，这会检索包含一系列困难数学问题的 js 文件

<script type="text/javascript" src="../js/arrays/math-hard.js"></script>

我有许多包含不同内容数组的 js 文件。另一个可能会加载英语问题等。我需要进行各种各样的测验，所有这些测验都是从整个界面不同部分的单独链接启动的。

目前要创建一个新测验，我正在复制 html 文件并将引用更改为指向数组所需的 js 文件。

我更喜欢有一个 html 文件，并且只需编写不同的链接来加载同一个 html 文件，但动态替换其他 js 数组文件之一来更改内容。我不知道如何做到这一点，也无法在任何地方找到已发布的解决方案。

目前编写的 html 文件仅引用具有数组的 js 文件之一，但如果作为实现此功能的一部分有必要，则可以在该单个文件中包含指向所有这些文件的链接。

目前我有一个 html 文件（已精简）

<!doctype html>
<html>
<head>
<script type="text/javascript" src="../js/quiz.js"></script>
<script type="text/javascript" src="../js/gridquiz/s-english-easy.js"></script>
</head>
<body>      
<div id="gridQuizContent" class="quiz-content">
<div id="divClick" class="quiz-click"></div>
</div>
</div>
</body>
</html>

它会加载english-easy.js，看起来基本上像这样（简化）

Quiz.easy = [
    ['hi-IN', 'dog', 'cat', 'pig', 'cow'],
    ['hi-IN', 'me', 'you', 'he', 'she'],
    ['hi-IN', 'up', 'down', 'in', 'out'],
    ['hi-IN', 'hot', 'cold', 'big', 'small'],
];

我想写很多链接，只是加载相同的 html 文件，但改变这一行

<script type="text/javascript" src="../js/gridquiz/s-english-easy.js"></script>

在加载时引用不同的数组。

【问题讨论】：

标签： javascript html arrays hyperlink

【解决方案1】：

我个人会使用JSON 文件来实现这一点。我在this 网站上找到了一个教程，它遵循相同的问题“如何存储测验问题”。

【讨论】：

数组文件都已经以特定的方式编写，以配合驱动测验的主js文件，并且它们包含该数组之外的其他代码，所以我真的不能采取新的方法自己创建数组。我需要从不同的链接加载相同的单个 html 文件，但在加载时动态更改它所引用的 js 文件。

【解决方案2】：

如果每个测验 URL 类似于以下内容：

https://quiz.com/quiz.html?quiz=math-hard
https://quiz.com/quiz.html?quiz=math-easy
https://quiz.com/quiz.html?quiz=history-hard

然后您可以通过检查 URL 路径在“基本”JavaScript 文件中 dynamically load the desired JavaScript file 进行测验：

// base.js

function dynamicallyLoadScript(url) {
    // create a script DOM node
    var script = document.createElement("script");  
    // set its src to the provided URL
    script.src = url;  

    /* add it to the end of the head section of the page (could change 'head' 
       to 'body' to add it to the end of the body section instead) */
    document.head.appendChild(script);  
}


let params = new URLSearchParams(location.search);
if (params.has('quiz')) {
    dynamicallyLoadScript(params.get('quiz') + ".js");
}

所以https://quiz.com/quiz?quiz=math-hard 的 HTML 类似于：

<!doctype html>
<html>
  <head>
    <script src="../js/base.js"></script>
 
    <!-- Added by 'base.js' -->
    <script src="../js/arrays/math-hard.js"></script>
  </head>
  <body>
  </body>
</html>

【讨论】：

在您上面假设的三个目录中，它们是否包含文件？我希望有一个解决方案，我只需编写一个链接，并且对超链接代码本身进行一些修饰，它会为测验启动同一个 html 文件，但会换出 js 文件 onload。所以没有三个目录，只有三个链接都指向同一个（动态修改的）目的地。
以一种非常粗略的方式，它可能与加载具有 html 锚点的页面相同，然后编写三个指向英语、数学和历史的链接，但只需转到同一页面, #anchor 修改你得到的东西。我知道这不是真的类似，但基本概念是相似的，因为我想避免创建单个 html 文件和 js 数组之外的任何其他文件或目录
好吧，是的，这有点不同。你能用你已经写的代码更新你的问题吗？我相信我可以在这方面为您提供帮助，但如果我了解您已经在做的事情会很有帮助，所以我们在同一页上！
可以将JS文件的名称放在链接的查询参数中，如quiz.html?data=math-hard.js。然后，您可以从查询字符串构造脚本的 URL。 @coltonrusch
重点是你得到url参数从查询字符串传递给函数。