如何仅使用一个 html 文件来显示不同但相似的内容

Question

我创建了一个hospital.js 文件，其中包含一个包含所有所需信息的数组，然后我使用这个hospital.js 文件在我的hospital.html 中创建了一个表来显示所有医院的列表，现在我想添加每个医院的链接表格的单元格，当我单击医院名称时，它将转到一个新的 detailPage.html，它将显示该医院的详细信息。

但是现在无论点击哪家医院，都只能打开同一个detailPage，我点击相应的医院后，只能用这个detailPage.html来显示不同医院的信息吗？ 因为detailPage的格式是一样的，唯一的区别就是他们的名字，地址，电话等。如果是这样，我该怎么做？

医院名单在hospital.html

医院.js

在hospital.html中创建表

在hospital.html中创建表格的javascript代码

详情页.html

详情页 html

Answer 1

必须将变量值注入到 html 文件中。 简单地，您可以使用 html 查询字符串将变量传递到 html 文件中，如下所示。

示例 HTML(test.html)

<html>
  <head></head>
  <body>
    <script>
      var urlParams = new URLSearchParams(window.location.search)
      document.body.innerHTML = `
      <h1>${urlParams.get('name')}</h1>
      <h1>${urlParams.get('address')}</h1>
      <h1>${urlParams.get('tel')}</h1>
      `
    </script>
  </body>
</html>

访问它的示例链接：“test.html?name=apple&address=home&tel=1234”

（请注意，互联网Exploere不支持URLSearchParams 。所以，你要适用于所有浏览器的HTML，请添加自己的功能（填充工具）来获取查询字符串）

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

用法

getUrlParameter('name') // => apple

如何仅使用一个 html 文件来显示不同但相似的内容

问题描述

1 个解决方案

解决方案1
0 2019-12-02 05:06:31

如何仅使用一个 html 文件来显示不同但相似的内容

问题描述

1 个解决方案

解决方案1 0 2019-12-02 05:06:31

解决方案1
0 2019-12-02 05:06:31