-4

I am trying to load one HTML file into another.

index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="default"></div>
        <script src="index.js"></script>
    </body>
</html>

I found this js code to use, but instead of using a button click I want the file to be read and passed to innerHTML onload

index.js

window.onload = function() {
        var fileInput = document.getElementById('fileInput');
        var fileDisplayArea = document.getElementById('fileDisplayArea');

        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    fileDisplayArea.innerText = reader.result;
                }

                reader.readAsText(file);    
            } else {
                fileDisplayArea.innerText = "File not supported!"
            }
        });
}

Thanks, also is window.onload = function() necessary here?

Jimmy Bellmon
  • 55
  • 6
  • and I don't want to use jquery – Jimmy Bellmon Mar 25 '17 at 03:37
  • how could I do this using javascript FileReader like the example I have above. The only thing I need to change in my example code above is instead of using an input click to upload the file, I want to have the file read directly from a specified folder/directory! I prefer to use javascript so that I can do backend coding to modify everything dynamically. – Jimmy Bellmon Mar 25 '17 at 17:48
  • duplicate of [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – João Pimentel Ferreira Dec 28 '20 at 21:39
  • Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – João Pimentel Ferreira Dec 28 '20 at 21:39

1 Answers1

0

In html you can load other html files into one html file using Iframe

<!DOCTYPE html>
<html>
<body>

<iframe src="header.html">
  <p> display</p>
</iframe>

</body>
</html>

or you can refer these community links

How to include an HTML page into another HTML page without frame/iframe?

Insert one HTML file into another HTML file

without iframe try this give id to your div

 document.getElementById("your div id").innerHTML='<object type="text/html" data="home.html" ></object>';
Community
  • 1
  • 1
Vikash Patel
  • 1,328
  • 9
  • 28