I need to link to another HTML page inside my current HTML page using JavaScript or HTML

Question

I am creating a web-page that has other pages nested inside of one main HTML file. So far, I have managed to get a working tab system in for its navigation menu, but instead of showing internal <div> content when a tab is selected, I want it to display another HTML page I have created.

I am trying to avoid using <iframe> if at all possible as I feel it wont be useful in the long-run. I have attempted to find an alternative, but I have been unable to so far.

I am working with JavaScript, HTML5, and CSS- so I would appreciate help that includes these languages, not JQuery.

Answer 1

If you don't want to use JQuery or iframes , I suggest you use html object tag .

Create 2 HTML files. In my example, one.html and two.html

one.html

<div id="display"></div>

<script>
function load_anotherpage() {
 document.getElementById("display").innerHTML='<object type="text/html" data="two.html"></object>';
}

load_anotherpage();
</script>

two.html

<h1>Hello</h1>

Answer 2

1. Write the HTML you want to be repeated in the page. As an example a simple copyright insertion, a file with a single line of JS will suffice:

document.write("Copyright Lifewire, all rights reserved.");

2. Save your JS file into a separate directory under your webroot, usually includes:

includes/copyright.js

3. Open, in an HTML editor, a web page that will display the JavaScript output. Find the location in the HTML where the include file should display, and place the following code there:

<script type="text/javascript" src="includes/copyright.js"></script>