您可以将'html文件'编译在一起以模拟“包含”功能吗?

时间:2017-07-14 12:24:05

标签: javascript jquery html compilation include

我喜欢SASS,因为您可以创建mixins并重新使用您的代码,方法是包含各种SASS文件,这些文件在导出/保存时编译(取决于您的应用程序)。 PHP可以做一些相同的事情,但我从来没有看到一个HTML页面分成各种HTML文件,并在导出/保存时编译成一个整体。

我无法编写PHP而且我不希望这样的开销只是为了让事情变得更容易并且必须调整一个文件(即'navigation.html')而不是更改网站上每个页面中的代码。

因此,我要问以下两种情况之一:

  1. 可以合并部分HTML文件的编译器,例如Codekit
  2. HTML / Javascript / jQuery / Ajax(< - 没有经验,请指导)功能,在加载时将HTML部分包含在一起
  3. 不得不调整超过50页的一件事情可能会很痛苦,但是在每个页面上使用相同的代码也可以提供一些统一性并创造保证。这就是为什么我希望我的请求有解决方案。

2 个答案:

答案 0 :(得分:1)

您的第二个选择是我使用的,您创建通用"组件"并且根据您插入它的父组件的ID之类的内容,它将以不同的方式运行或从JS或jQuery加载不同的函数库"例如,如果菜单组件的父div是' mainMenu'它将调用显示主要选项的情况。当菜单组件父ID为“加载”时它显示加载按钮并在其上添加加载文件的代码...

第1页

 <div id='mainMenu'></div>

然后第2页

 <div id='load'></div>

然后是jQuery

$(document).ready(function(){
    component = "<ul id='menu'><li></li></ul>";
    $(body).find("div").each(function(){
        switch($(this).attr("id") {
            case "mainMenu":
                code to add functionality to component;
                break;
            case "load":
                code to add functionality to component;
                break;
            default:
                code to manage error;
        }
    });
}):

这只是我认为你可以做的一个例子。

答案 1 :(得分:1)

您可以使用w3.js

中的w3-include-html

示例:

<div w3-include-html="content.html"></div>

HTML Include