nav.template.html

Question

我试图将导航保存在一个html文件中，而不是将其复制并粘贴到每个文件中，因此如果我想要更改某些内容，我就不必编辑每个文件。我想将导航代码包含在我的文件中，但到目前为止我没有尝试过按照我想要的方式工作。我想仅使用html / css / js这样做，这似乎是一种简单的方法，因为它在很多项目中都很实用。

到目前为止，我已经尝试了

object / iframe - 将代码嵌入到它的迷你窗口中，而不是所需的结果。

javascript object.write - 已导入文件的已删除代码。

w3.includehtml - 在Firefox中工作，但不是chrome，我无法弄清楚原因。对此的帮助将不胜感激，因为这似乎是最好的方法。

php include-没有用，可能是因为我不知道php并且很可能做错了什么，如果有人能告诉我如何或链接教程，我会对它开放。< / p>

Answer 1

将组件创建为模板，例如：

nav.template.html

<template>
  <nav><!-- nav stuff here ... there has to be only one childNode of template because of how we will mount it, but you could change that -->
  <style scoped>/* you can style only nav content directly here if you like */</style>
  </nav>
</template>

然后，在domready上使用javascript加载，例如：

site.js

document.addEventListener('DOMContentLoaded', function() { // there are more thorough, extensible ways of attaching to this event ..
    let el = document.querySelector('.nav-mount-point')
    // I'm doing to use axois, assuming you load it from a CDN or directly. You could also do this with plain AJAX, etc
    axios.get('path/to/nav.template.html')
      .then(res => {
        let dt = document.createElement('div')
        dt.innerHTML = res.data
        el.appendChild(dt.children[0].content.cloneNode(true))
      })
      .catch(e => console.error(e))
}, false);

如何将html导入另一个html文档？

1 个答案:

nav.template.html

site.js