是否可以在多个页面上重复使用HTML作为模板？

发布时间：2020-12-14 18:33:27 所属栏目：资源来源：网络整理

导读：我在网站上有几个页面,每页都使用相同的标题.我想知道是否有一些方法可以简单地引用一个带有html的文件,类似于这个伪代码中的标题类： !-- Main Page --body html_import_element src = "myheadertemplate.html"body 然后在一个单独的文件中： !-- my header

我在网站上有几个页面,每页都使用相同的标题.我想知道是否有一些方法可以简单地引用一个带有html的文件,类似于这个伪代码中的标题类：

<!-- Main Page -->

<body>
  <html_import_element src = "myheadertemplate.html">
<body>

然后在一个单独的文件中：

<!-- my header template html -->

<div>
  <h1>This is my header</h1>
  <div id = "navbar">
    <div class = "Tab">Home</div>
    <div class = "Tab">Contact</div>
  </div>
</div>

通过这种方式,我可以编写标题html一次,然后通过编写一个简单的标记将其导入到我需要它的每个页面中.这可能吗？我可以用XML做到这一点吗？

解决方法

你可以在下面以这种方式做到这一点.

<head>
  <link rel="import" href="myheadertemplate.html">
</head>

你可以在哪里使用myheadertemplate.html

<div>
  <h1>This is my header</h1>
  <div id = "navbar">
    <div class = "Tab">Home</div>
    <div class = "Tab">Contact</div>
  </div>
</div>

然后,您可以在下面的JS中使用它

var content = document.querySelector('link[rel="import"]').import;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!