如何仅使用一个 html 文件来显示不同但相似的内容
[英]how to use only one html file to show different but similar contents
问题描述
I created a hospital.js file which include an array contains all the information needed, then i used this hospital.js file to create a table in my hospital.html to show a list of all hospitals, now I want to add links to each cell of the table, when I click a hospital's name, it will go to a new detailPage.html which will show detail information of this hospital.
我创建了一个hospital.js 文件，其中包含一个包含所有所需信息的数组，然后我使用这个hospital.js 文件在我的hospital.html 中创建了一个表来显示所有医院的列表，现在我想添加每个医院的链接表格的单元格，当我单击医院名称时，它将转到一个新的 detailPage.html，它将显示该医院的详细信息。
but now I can only open same detailPage no matter which hospital i click, can i only use this detailPage.html to show different hospital's information after I click corresponding hospitals?但是现在无论点击哪家医院，都只能打开同一个detailPage，我点击相应的医院后，只能用这个detailPage.html来显示不同医院的信息吗？ since the format of detailPage is same, the only difference is their name, address, tel, etc. If so, how can I do it?因为detailPage的格式是一样的，唯一的区别就是他们的名字，地址，电话等。如果是这样，我该怎么做？
list of hospital in hospital.html医院名单在hospital.html
create table in hospital.html在hospital.html中创建表
javascript codes to create table in hospital.html在hospital.html中创建表格的javascript代码
1 个解决方案
解决方案1
0 2019-12-02 05:06:31
Variable values must be injected into the html file.必须将变量值注入到 html 文件中。 Simply you can use html query string to pass variables into the html file like below.简单地，您可以使用 html 查询字符串将变量传递到 html 文件中，如下所示。
Example Html(test.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>
Example link to access it: "test.html?name=apple&address=home&tel=1234"访问它的示例链接：“test.html?name=apple&address=home&tel=1234”
(Note, Internet Exploere doesn't support URLSearchParams . So you want your html available for all browser, please add your own function(polyfill) to get query string) （请注意，互联网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, ' '));
};
Usage用法
getUrlParameter('name') // => apple
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.