如何将一个文本文件中的代码注入 HTML 页面答案

【问题标题】：How to inject code from one text file into an HTML page如何将一个文本文件中的代码注入 HTML 页面
【发布时间】：2013-07-08 14:20:21
【问题描述】：

我有一系列大的html页面在开发中，每个都使用一个通用的结构：header/content/sidebar。

页眉和侧边栏部分具有所有页面通用的代码。只有内容发生变化。

在开发阶段，我希望能够对页眉和侧边栏进行一次更改，并在所有页面上看到复制的结果，而无需单独编辑每个页面。

我已经做了一些谷歌搜索，最简单的解决方案似乎是创建 2 个单独的文本文件，其中包含标题和侧边栏部分的代码，然后在我的 HTML 页面中的适当位置注入它编辑。

我知道不建议将这用于实时项目，因为它会显着增加加载时间，但对于开发工作，它会为我节省大量时间。

你同意吗？如果是这样，有人知道最简单的方法是什么吗？

谢谢

【问题讨论】：

我认为您可以使用 AJAX 仅更新页面的正文或任何其他 div，
api.jquery.com/load 我想这就是你想要的。编辑：对不起，这应该是评论。
你有什么理由只想为此使用javascript？，你的服务器端语言应该能够include所有你需要的文件
你为什么不使用像 Jekyll 这样的静态站点生成器？ jekyllrb.com

标签： javascript jquery html

【解决方案1】：

您最好使用某种服务器端技术（例如 PHP）来执行此操作。这将对加载时间的影响可以忽略不计，因为页面在发送到浏览器之前会被连接起来。

您可以通过执行以下操作来完成它：

<?php require('header.php'); ?>

<!-- Main content goes here --> 

<?php require('sidebar.php'); ?>

然后将文件header.php和sidebar.php放在与主文件相同的目录中。

【讨论】：

【解决方案2】：

使用某种服务器端模板语言，允许您在彼此之间包含文件。

【讨论】：

【解决方案3】：

如果尽管有其他答案，您仍坚持从 JavaScript 执行此操作，则以下是我使用的模块：

(function xload (slctr) { //================================================== xload ===
  function xloader (src, dst) {
    if (arguments.length == 1) {
      dst = src;
      src = dst.getAttribute ('data-source') || '';
    }

    var req;

    try {
      src = src.match (/^([^]*?)(!)?(?:\[\[([^]*?)\]\])?$/);
      (req = new XMLHttpRequest ()).open ('GET', src[1], !src[2]);
      req.onreadystatechange = function (ev) {
        if (this.readyState === 4) {
          if (typeof dst == 'function')
            dst (req);
          else {
            dst[dst.tagName == 'TEXTAREA' ? 'value' : 'innerHTML'] = this.responseText;
            [].forEach.call (dst.getElementsByTagName ('SCRIPT'), function (s, i) {
              var script = document.createElement ('script');
              script.innerHTML = s.parentNode.removeChild (s).innerHTML;
              document.body.appendChild (script);
            })
          }
        }
      };
      src[3] && req.overrideMimeType &&
        req.overrideMimeType (src[3]);
      req.send (null);
    } catch (err) { console.log ('xloader error : ', err); }
  }

  [].forEach.call (document.querySelectorAll (slctr), function (el) { xloader (el); });

}) ('[data-source]'); //------------------------------------------------------ xload ---

处理任何元素，例如具有data-source 属性的div。 data-source 指定要包含的文件的 url。当他的 Ajax 请求完成时，div 的全部内容将替换为获取的文本。 data-sourc url 可以选择后跟 ! 指示同步加载，然后是包含在 [[ 和 ]] 中的 Mime 类型

加载文本中的任何脚本都被提取并注入到文档正文中。

在控制台上报告错误情况。

该模块是完全独立的，它处理所有包含data-source 属性的元素。它当然应该在页面的 HTML 文本之后加载。

【讨论】：