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

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.

1 answer

  • answered 2019-10-15 16:06 Gosi

    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>