Jump to content
Please Use CODE Tags

This is a way to include HTML markup from other files

Blake Gall
 Share
Posted

I was looking up how to take a file with HTML markup and include it in a full HTML document. I got nowhere, so this is my guide on how to do it after a day of experimenting

 

This is the file with our HTML markup (file.html):

<h1>HELLO FROM THE OTHER FILE</h1>

And this is our full html document:

<html><head><title>Experiment</title></head><body><h1>Hello from this document</h1></body></html>

This method will be using javascript so if your trying to avoid JS, this isn't the method for you.

 

First, we need to add a div element. We're going to put it right below the header.

<div id="container"></div>

Now we need to create our script element:

<script> </script>

In the script, create a XMLHttpRequest

var xhr = new XMLHttpRequest();

Open the XMLHttpRequest

xhr.open("GET", "file.html", false);

(You can set "false" to "true" if you want the request to run in async mode. I left it at false to keep this tutorial simple.

 

Send the Request

xhr.send();

Now, set the innerHTML attribute of the container div to the responseText attribute of the XMLHttpRequest

document.getElementById("container").innerHTML = xhr.responseText;

And that's it for the code, you should see this:

 

 

Hello from this document

HELLO FROM THE OT​​HER DOCUMENT

 

And that's it. I know we probably could have used PHP, but I was trying to refrain from that in the project I'm doing. Thank you.

 

EDIT: Also, if you want to manipulate elements in the file, you want to do it somewhere after you've set the innerHTML of the container.

Bill: i5-4690K - 16GB Corsair Vengeance 2400mhz (2x8GB) RAM - Cooler Master Hyper 212 EVO - 1TB 7200RPM Seagate HDD + Samsung 850 EVO 120GB SSD -  MSI Z97S SLI Krait Edition - NZXT H440 - EVGA GTX 970 FTW ACX 2.0 - CX600M - NZXT Hue RGB LED kit

How-To-Gaming Community: Join Here

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You should really use a server-side language like PHP for this like:

<html><head><title>Experiment</title></head><body><h1>Hello from this document</h1><?php include 'file.html'; ?></body></html>

The main file would also need to be .php instead of .html for this to work.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

You should really use a server-side language like PHP for this like:

<html><head><title>Experiment</title></head><body><h1>Hello from this document</h1><?php include 'file.html'; ?></body></html>

The main file would also need to be .php instead of .html for this to work.

 

Yeah, I know that would be a better approach, but I decided to refrain from using PHP for most of my project.

Bill: i5-4690K - 16GB Corsair Vengeance 2400mhz (2x8GB) RAM - Cooler Master Hyper 212 EVO - 1TB 7200RPM Seagate HDD + Samsung 850 EVO 120GB SSD -  MSI Z97S SLI Krait Edition - NZXT H440 - EVGA GTX 970 FTW ACX 2.0 - CX600M - NZXT Hue RGB LED kit

How-To-Gaming Community: Join Here

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

iFrames anyone?

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

iFrames anyone?

It wouldn't work right for what my goal was. I want to include a partial html file within a full html file and have full control over the HTML using javascript. 

 

If the header in the "file.txt" had the id "otherheader", you could still control it using Javascript. Meanwhile that wouldn't work in a iFrame.

But... the iFrame does work well in some cases.

Bill: i5-4690K - 16GB Corsair Vengeance 2400mhz (2x8GB) RAM - Cooler Master Hyper 212 EVO - 1TB 7200RPM Seagate HDD + Samsung 850 EVO 120GB SSD -  MSI Z97S SLI Krait Edition - NZXT H440 - EVGA GTX 970 FTW ACX 2.0 - CX600M - NZXT Hue RGB LED kit

How-To-Gaming Community: Join Here

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You can use PHP for this (as you guessed), but you can also use a built in Apache function called Server Side Include. https://httpd.apache.org/docs/2.2/howto/ssi.html

Whether or not you should use SSI over PHP is another question ;)

15" MBP TB

AMD 5800X | Gigabyte Aorus Master | EVGA 2060 KO Ultra | Define 7 || Blade Server: Intel 3570k | GD65 | Corsair C70 | 13TB

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×