how to use only one html file to show different but similar contents
Question
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.
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? since the format of detailPage is same, the only difference is their name, address, tel, etc. If so, how can I do it?
list of hospital in hospital.html
1 answers
solution1
0 2019-12-02 05:06:31
Variable values must be injected into the html file. Simply you can use html query string to pass variables into the html file like below.
Example 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"
(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)
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.