0

With the ever-growing library of JS frameworks (since I last build a website ~ 2014) is there a simple JS replacement/alternative for PHP's 'include' function. Or is PHP include still a relevant method of including chunks of code?

I'm building a website and want to achieve some basics like 'including' footers, headers, menu's etc. but would rather not make all my pages .php - it feels a bit clunky and unnecessary.

I found a related post here referencing Jekyll but it was a bit more specific to GitHub. Any pointers in the right direction appreciated!

Andyjm
  • 325
  • 3
  • 17
  • `include` is still the method for including other files in a php file. There's no alternative for that. – Brahma Dev Sep 25 '17 at 15:00
  • 1
    Packaging your javascript is the best option here, comes with other advantages like tree-shaking, es6 trans-piling etc.. Have a look at webpack. – Keith Sep 25 '17 at 15:01

1 Answers1

1

Since my first answer wasn't covering the interested question I decided to fully edit and replace the answer. Here we go..

Solutions

1 - JQuery load() function

<!-- LOAD JQUERY -->
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<!-- "INCLUDE" external files with code -->
<script> 
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
</script>

2 - NPM gulp package which lets you includes file and pass some parameters/values

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

an example of a gulp task:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

3 - pure javascript via document.write function and including script with it via src

<script type="text/javascript" src="header.js"></script>

4 - pure ajax request that requests additional data and places it where it should be placed on the page

5 - SSI (Server Side Include), as I mentioned it in comment

6 - iframes (not the best way, though)

7 - asp/jsp server script include (as alternative to php server script include)

More info here:

Common Header / Footer with static HTML

Make header and footer files to be included in multiple html pages

Hopefully you can find the best way that will suit your needs from one of this.

user268500
  • 91
  • 2
  • upvote for spending time and showing some passion! Thanks for sharing your thoughts, I probably need something a bit more concrete as my sole requirement here is for an include alternative in JS, the website will be simple in terms of backend requirements! – Andyjm Sep 25 '17 at 16:11
  • 1
    Thank you and sorry for improperly understanding of your goal! I was mainly focused on "php" and " frameworks" words combo in comparison to "javascript alternative" and totally forgot about include function.. As for about your goal - have you thought about SSI (old) style of including? Example: ``. Some people still prefer it. It has a lot of advantages, like no-need to load jquery for other popular include alternative, but some requirements too. Here's detailed explanation and comparison to ajax-method: https://webmasters.stackexchange.com/a/103838 – user268500 Sep 25 '17 at 16:56
  • Here's another opinion on prefering SSI over ajax: https://stackoverflow.com/a/29858653/8670275 – user268500 Sep 25 '17 at 17:09