Question

我正在研究HTML文档，这些文档应该保存在最终用户的本地文件系统中，就像任何文档一样，很多页面都有相同的元素，比如导航链接列表，我就是喜欢在添加/删除/更新页面时保留在一个位置以便于维护。

目前我有一个使用.load("_link.html")方法的简单jQuery解决方案，这可能没什么问题，但是我想知道是否有更好的方法可以在最终用户的计算机上实现这一点，所以释放的资源可用于其他内容：Plunker

我尝试使用<iframe>使用纯HTML方法，但辅助文件的DOM会干扰主文件的DOM（例如“_link.html”元素背后的背景）我的Plunker将是该文件的背景，而不是来自“index.html”），并且在不同的浏览器中表现不同，所以我认为这不是一个好方法。

我一直在探索类似GruntJS的东西（因为它可以在Linux / OSX和Windows上运行）在我的机器上构建最终的HTML，然后交付给最终用户的计算机，我喜欢这样的想法维护像HAML这样的源文件，但是我还有很多关于GruntJS的知识，所以我不确定这是否是我想要的方式。

有没有办法不依赖最终用户的浏览器在每个页面上加载jQuery库只是为了执行这样的简单任务？

Answer 1

如果你可以使用JS来使它工作，你可以做这样的事情 - ＆gt; https://jsfiddle.net/4evpde3w/

function TemplateAdder(){
// Adds the template to the DOM
this.add = function(append_to, template){
    parent = document.getElementById(append_to)
    parent.innerHTML = template;
}

// Converts the function to a string pulls the template out of it
    this.build = function(template){
      if(typeof template === 'function'){
        return template.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
     }
    }

    return this;
}
//  Create a new template Adder
var template_adder = TemplateAdder();

// Have to comment out the temaplate with multi line
// The clousure returns a function that includes the comments

var dropdown_template = (function () {/*

    <div class='dropdown'>
        <h3>
            Dropdown Header
        </h3>
        <p>
            I Am the Dropdown Content
        </p>
    </div>       

*/})

// The build function will convert the returned function into a 
string
// it then parses the string and pulls out the template between the 
comments
var template = template_adder.build(dropdown_template);

// This simple adds our template to the DOM
template_adder.add('dropdown-wrapper', template);

Answer 2

我最终使用XMLHttpRequest()找到了我想要的解决方案。

W3 Schools' W3.js库有一个完整的函数w3.includeHTML()，它检查DOM中每个元素的属性w3-include-html，并将目标URL的内容加载到元素中。

由于我不需要该库中的其他函数，我能够将该函数提取到我自己的JS文件中。我已经检查过它适用于Chrome，Firefox，Opera，Safari和MS Edge。我看到的唯一依赖是XMLHttpRequest本身，但即便如此，我也没有看到在可预见的未来发生变化。

正如我在评论中所指出的，由于文件协议的安全性问题，一些浏览器需要一个基本的Web服务器来通过JS（包括所讨论的其他解决方案）从本地文件系统提供导入的HTML文件。可以说，也许可以使用一个更复杂的Web服务器，它可以自己构建所有这些HTML文件的完整页面，但我最终决定“哑”本地主机更适合跨平台支持和此主要用于主要使用Firefox（不需要Web服务器）的客户端。

我做了一些小改动，但是solution本质上是从W3.js中提取的代码：

// Copied from: https://www.w3schools.com/lib/w3.js

var includeHTML = function() {
  var target_attr = "include-html";
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute(target_attr);
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute(target_attr);
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
};
includeHTML();

从另一个文件加载HTML元素的最佳非服务器方式

2 个答案: