16

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!

eng27
  • 906
  • 2
  • 8
  • 19
  • What do you mean by "the body part is too long"? If I understand your question right, then you ask for a way to combine multiple files to a long body. So the resulting body would be equally long. So what _is_ the issue here? What are to trying to get around? – arkascha Dec 12 '15 at 09:10
  • do you want to separate a large html file? – Priya Rajaram Dec 12 '15 at 09:11
  • 2
    possible duplicate of http://stackoverflow.com/questions/33551409/what-is-the-best-way-to-separate-a-large-html-file-into-three-smaller-html-files – AVI Dec 12 '15 at 09:13
  • 1
    @PriyaRajaram yes, exactly. Using php or jquery might be good idea to worth trying, but is there any other way to do this with even simpler way just using html? Though I think this question is common demand, I couldn't find a simple way to do that... – eng27 Dec 12 '15 at 09:23
  • @arkascha Thank you for the comment. For easier editing, I want to divide text into small components. – eng27 Dec 12 '15 at 09:27
  • This is not trivial, you'd have to apply additional logic. Either some server side scripting language like php which does the concatenation or server side include logic on http server level. Also a client side solution is possible based on javascript which fetches portions of the text and concatenates them. But html itself and css are a passive solutions that do _not_ offer such option by themselves. – arkascha Dec 12 '15 at 09:32
  • Yeah, you can split your relevant templating file into multiple html files like separate files for menus and major contents. As per @nitesh-pogul's answer, you can call all of these html files via jquery. – Adil Jul 27 '16 at 07:20

4 Answers4

12

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>
Asef Hossini
  • 655
  • 8
  • 11
Nitesh Pogul
  • 180
  • 1
  • 6
3

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>
Tobias Glaus
  • 3,008
  • 3
  • 18
  • 37
  • using PHP sounds good. But if the project becomes bigger and its needs change, could be hard to deal with. I suggest using some frontend framework like Vue.js or... – Asef Hossini Oct 12 '21 at 07:20
1

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

Waqas Shahid
  • 1,051
  • 1
  • 7
  • 22
0

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.

Darkosphere
  • 107
  • 8