Simulate PHP Include Without PHP

php javascript html url include

10,517

Solution 1

You have a few options, each with its own advantages and drawbacks:

Server Side Includes, or SSI. If you don't have PHP there's a good chance you don't have SSI either, and this option requires some irritating mucking-about with your .htaccess file. Check Dominic P.'s answer for a writeup of SSI. The benefit of SSI over JavaScript or Frames is that it doesn't require the user to have JS enabled - which a lot of users don't - and it also doesn't present any navigational difficulties.
Frames. You could either use standard frames to put the navigation in its own separate file, and with the correct styling it would be seamless. You could also use an iframe to place your navigation in an arbitrary part of the site, like a sidebar or whatever. The downside to frames, particularly standard frames, is that they tend to make bookmarking, links and the forward/back buttons behave oddly. On the upside, frames don't need browser compliance or server support.
JavaScript. You can refer to any of the other answers for excellent explanations of the JS solution, particularly if you're using jQuery. However, if your site isn't otherwise dynamic enough that your users will want to have JavaScript enabled, this will mean that a large number of your viewers will not see the menu at all - bad, definitely.

Solution 2

Yes use .load jQuery ajax function

$('#result').load('ajax/menu.html');

That way your code stays clean, and you can just edit the includes in seperate HTML files just like PHP.

Solution 3

You should consider AJAX for this task. Include a third party library like jQuery and load the separate HTML files inside placeholders, targeting them by ID.

E.g, in your main HTML page:

<div id="mymenu"></div>

Also, in your main HTML, but in the HEAD section:

$('#mymenu').load('navigation.html');

But your best bet would be to switch to a hosting that supports PHP or any other server-side includes. This will make your life a lot easier.

Solution 4

Check out Server Side Includes. I don't have a whole lot of experience with them, but from what I recall, they are designed to be a solution to just your problem.

Solution 5

You can use HTML Imports http://w3c.github.io/webcomponents/spec/imports/

Here is an example from http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html contains

 <div class="warning">
    <style scoped>
      h3 {
        color: red;
      }
    </style>
    <h3>Warning!</h3>
    <p>This page is under construction</p>
  </div>

  <div class="outdated">
    <h3>Heads up!</h3>
    <p>This content may be out of date</p>
  </div>

Then index.html could contain

<head>
  <link rel="import" href="warnings.html">
</head>
<body>
  ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>

View more solutions

10,517

Author by

dougmacklin

Updated on June 27, 2022

Comments

dougmacklin almost 2 years
I want to include the same navigation menu on multiple pages, however I do not have PHP support, nor can I affect my server in any other way.

I want to avoid simply copying and pasting the html onto all the pages as this would make updating the menu a pain.

The two options I can think of are as follows:

1) Have all the content exist on one page, then determine which content to show based on a keyword appended to the url:
```
example.com/index?home
example.com/index?news
```
2) Include a javascript file that has a function that writes the menu out and call the function on each page
```
function setupMenu() {
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}
```
With Option 1, the updating process would consist of editing one nav menu on the one page

With Option 2, updating would mean changing the function in the javascript file

My concern with Option 1 is that the page would have to load a lot of content that it wouldn't need to display. My concern for Option 2 may seem trivial but it is that the code can get messy.

Are there any reasons doing it one way would be better than the other? Or is there a third superior option that I'm missing?
dougmacklin over 11 years

thanks for this tutorial, I will look into whether or not my server supports these
dougmacklin over 11 years

thank you for your answer, marked @user190284's as accepted simply because I think it's more helpful to those who aren't as familiar with jQuery
dougmacklin over 11 years

ended up going with frames as SSI is not an option. the javascript load() method works but takes far too long to complete
dougmacklin over 11 years

after doing some tests, this method works but takes far too long, average speeds of more than two seconds until the nav appears. my server seems to process things slowly in general, so I advise future users to try for themselves
Winfield Trail over 11 years

I'd recommend sticking with Frames as you have done, but if the JS load() takes that long there's probably something else going on. FWIW, an iFrame is probably going to be better than a standard frame for your navs. Sorry your hosting is so restrictive!
Dzhuneyt over 11 years

Loading times depend purely on your server's and client's connection speed. The parsing itself of the received data happens within a few milliseconds using the JavaScript engine (its jQuery extension in this case).