CODEWITHSUNDEEP
htmlcss
eng27
eng27

Reputation: 916

How to separate html text file into multiple files?

Very basic question about html.

Because the <body> is too long, I want to divide the file into multiple files. It is not about using iframe etc, but just want to include multiple text files to create <body> of the html file.

Thank you!

Upvotes: 16

Views: 18022

Answers (4)

Darkosphere
Darkosphere

Reputation: 161

With only HTML it would not be possible you need to add some JavaScript to be able to do so.

Using a data attribute with the Fetch API and some async functions you could do it as follow:

HTML file:

<div data-src="./PATH/filename.html"></div>

This element will receive as HTML content the content of the file specified in its data-src attribute.

Now the JavaScript:

async function getFileContentAsText(file) {
    const response = await fetch(file);
    const fileContent = await response.text();
    return fileContent;
}

async function insertContentsFromFiles() {
    const tbl = document.querySelectorAll('[data-src]'); // get elements with the data attribute "data-src" 
    for (var i=0; i < tbl.length; i++) // loop over the elements contained in tbl
        tbl[i].innerHTML = await getFileContentAsText(tbl[i].dataset.src);
}

// dont forget to call the function to insert the files content into the elements
insertContentsFromFiles();

When the insertContentsFromFiles() method will be called it will first retrieve all the elements that have the data attribute data-src then we loop over these elements using their data-src value with the getFileContentAsText() method to affect their innerHTML property as the content of the file specified in the data attribute.

As we are using querySelectorAll() to get the elements with the data-src attribute the above JavaScript code will work for an unlimited amount of elements as long as they have that data attribute.

Note: In its current state the above JavaScript code is not optimized for loading a big amount of files as it process the files to be loaded one by one. If you are interested in solving this issue you may want to use promise.all() and update the insertContentsFromFiles() method to parallelize the files loading by taking advantage of the asynchronous operations.

Warning: If you plan to use elements that are in the loaded files from JavaScript you will have to retrieve them after they have been loaded into the page otherwise they will have an undefined value. To do so you can dispatch an event when a file has been loaded so you can attach specific functionnalities to the page based on the triggered events.

Upvotes: 0

Nitesh Pogul
Nitesh Pogul

Reputation: 180

You can do it using jQuery:

<head> 
    <script src="jquery.js"></script> 
    <script> 
        $(function(){
            $("#ContentToInclude").load("b.txt or b.html"); 
        });
    </script> 
</head>

And load it in HTML:

<body> 
   <div id="ContentToInclude"></div>
</body>

Upvotes: 12

Tobias Glaus
Tobias Glaus

Reputation: 3628

Just change the extension to .php instead of .html. Then you can just put, for example, your whole head inside the file head.php( or head.inc).

The whole thing would look something like this then:

<!DOCTYPE html>

<?php
  include 'head.php';
?>

<body>
 <!-- stuff in here -->
</body>

<html>

You can obviously split your body up into seperate pieces like this:

<body>

<?php
  include 'firstPart.php';
?>

<!-- some other stuff -->

</body>

Upvotes: 3

Waqas Shahid
Waqas Shahid

Reputation: 1060

You can easily break your code in multiple files, Then create one file with .php extension and include them all!

Upvotes: 1

Related Questions