0

我有一系列的大型html页面正在开发中，每个页面都使用一个共同的结构：标题/内容/侧边栏。

标题和侧边栏部分具有所有页面通用的代码。只是内容变化。

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

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

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

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

谢谢

4

3 回答 3

6

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

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

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

<!-- Main content goes here --> 

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

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

于 2013-07-10T15:12:58.427 回答
0

如果尽管有其他答案，您仍坚持从 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 ---

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

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

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

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

于 2013-07-10T15:50:26.393 回答
0

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

于 2013-07-10T15:12:58.847 回答