如何僅使用一個 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