编写 hyperlink 以便加载 html 文件但内部 link 到 js 文件更改

Question

这是一个一般性问题，我搜索了高低都没有结果，非常感谢任何输入。

我有一个 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>

它加载了英语-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>

加载时引用不同的数组。

Answer 1

我个人会使用 JSON files to realize this. I found a tutorial on this 网站，它遵循同样的问题“如何存储测验问题”。

Answer 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

然后您可能 dynamically load the desired JavaScript file 在 'base' JavaScript 文件中检查 URL 路径来进行测验：

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

编写 hyperlink 以便加载 html 文件但内部 link 到 js 文件更改

Write hyperlink so that an html file loads but internal link to js file changes

html

javascript

arrays

hyperlink