Modern JS method of PHP 'include' function

Question

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!

include is still the method for including other files in a php file. There's no alternative for that. — user2652134
– user2652134, Commented Sep 25, 2017 at 15:00
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
– Keith, Commented Sep 25, 2017 at 15:01

user268500 · Accepted Answer · 2017-09-25 18:49:27Z

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.

edited Sep 25, 2017 at 18:49

answered Sep 25, 2017 at 16:02

user268500

912 bronze badges

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

3 Comments

Andyjm Over a year ago

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!

user268500 Over a year ago

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: webmasters.stackexchange.com/a/103838

user268500 Over a year ago

Here's another opinion on prefering SSI over ajax: stackoverflow.com/a/29858653/8670275

Collectives™ on Stack Overflow

Modern JS method of PHP 'include' function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related