How to inject code from one text file into an HTML page

Question

I have a series of large html pages in development, each uses a common structure: header / content / sidebar.

Header and sidebar sections have code common to all pages. Only content changes.

During the development phase, I want to be able to make changes to the header and sidebar once and see the results replicated on all pages without having to edit each page separately.

I've done a bit of googling, and the simplest solution seems to be to create 2 separate text files with the code for the header and sidebar sections, and then inject this at the appropriate points in the HTML pages I'm editing.

I know this is not recommended for a live project, as it would dramatically increase the load times, but for dev work it would save me a lot of time.

Would you agree? If so, anybody have any idea what the simplest way to do this is?

Thanks

I think you can user AJAX to update only the body or any other div of the page, — DGomez
– DGomez, Commented Jul 10, 2013 at 15:12
api.jquery.com/load I think this is what you want. EDIT: Sorry this should have been a comment. — Th3BFG
– Th3BFG, Commented Jul 10, 2013 at 15:12
Any reason you want to use javascript only for this?, Your server side language should be able to include all the files you require — Anil
– Anil, Commented Jul 10, 2013 at 15:13
Why don't you use a static site generator like Jekyll? jekyllrb.com — aliirz
– aliirz, Commented Jul 10, 2013 at 15:13

Alyssa Ross · Accepted Answer · 2013-07-10 15:12:58Z

6

You would be better to do this with some sort of server-side technology, like PHP. This would make the impact on loading times negligible as the pages would be concatenated before they were sent to the browser.

You would accomplish it by doing something like this:

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

<!-- Main content goes here --> 

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

And then have the files header.php and sidebar.php in the same directory as the main files.

answered Jul 10, 2013 at 15:12

Alyssa Ross

2,16916 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naftali · Accepted Answer · 2013-07-10 15:12:58Z

0

Use some sort of serverside templating languate that would allow for you to include files within each other.

answered Jul 10, 2013 at 15:12

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

HBP · Accepted Answer · 2013-07-10 15:50:26Z

If, despite the other answers, you insist on doing this from JavaScript, the following is a module I use :

(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 ---

Any element, a div for example with a data-source attribute is processed. The data-source specifies the url of the file to be included. When he Ajax request completes, the entire contents of the div are replaced with the text fetched. The data-sourc url may optionally be followed by a ! indicating synchronous load and then by a Mime type enclosed in [[ and ]]

Any scripts in the loaded text are extracted and injected into the document body.

Error conditions are reported on the console.

The module is entirely standalone and processes all elements containing the data-source attribute. It should, of course be loaded after the HTML text of the page.

Collectives™ on Stack Overflow

How to inject code from one text file into an HTML page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related