Is it possible to reuse HTML like a template on multiple pages?

前端未结

关注

 3  987

I have several pages on a website that use the same header for each page. I was wondering if there was some way to simply reference a file with the html for the header sort

相关标签:

3条回答

终归单人心

2020-12-05 08:37

You could do it in this fashion below.

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

where you could have your myheadertemplate.html

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

You can then use it with JS below

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

0 讨论(0)

太阳男子

2020-12-05 08:51

As far as I know it's not possible. You can load the header as a webpage in a iframe element though. In the past webpages were built with frame elements to load seperate parts of a webpage, this is not recommended and support in current browsers is due to legacy.

In most cases this is done with server side languages like php with as example include("header.php");.

0 讨论(0)
发布评论:

提交评论
- 加载中...

小蘑菇

2020-12-05 08:58

So, after a long time I actually found a way to do this using AJAX. HTML Imports are a great solution, but the support across browsers is severely lacking as of 04/2017, so I came up with a better solution. Here's my source code:

function HTMLImporter() {}

HTMLImporter.import = function(url) {

  var error, http_request, load, script;

  script = document.currentScript || document.scripts[document.scripts.length - 1];

  load = function(event) {

    var attribute, index, index1, new_script, old_script, scripts, wrapper;

    wrapper = document.createElement("div");
    wrapper.innerHTML = this.responseText;

    scripts = wrapper.getElementsByTagName("SCRIPT");

    for (index = scripts.length - 1; index > -1; -- index) {

      old_script = scripts[index];

      new_script = document.createElement("script");
      new_script.innerHTML = old_script.innerHTML;

      for (index1 = old_script.attributes.length - 1; index1 > -1; -- index1) {

        attribute = old_script.attributes[index1];
        new_script.setAttribute(attribute.name, attribute.value);

      }

      old_script.parentNode.replaceChild(new_script, old_script);

    }

    while(wrapper.firstChild) {

      script.parentNode.insertBefore(wrapper.removeChild(wrapper.firstChild), script);

    }

    script.parentNode.removeChild(script);

    this.removeEventListener("error", error);
    this.removeEventListener("load", load);

  };

  error = function(event) {

    this.removeEventListener("error", error);
    this.removeEventListener("load", load);

    alert("there was an error!");

  };

  http_request = new XMLHttpRequest();
  http_request.addEventListener("error", error);
  http_request.addEventListener("load", load);
  http_request.open("GET", url);
  http_request.send();

};

Now when I want to import HTML into another document, all I have to do is add a script tag like this:

<script>HTMLImporter.import("my-template.html");</script>

My function will actually replace the script tag used to call the import with the contents of my-template.html and it will execute any scripts found in the template. No special format is required for the template, just write the HTML you want to appear in your code.

0 讨论(0)