1

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.

Kizzu
  • 29
  • 4
  • 3
    Possible duplicate of [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – Germano Plebani Oct 15 '19 at 15:41
  • 1
    @GermanoPlebani That is a jquery solution, OP doesn't want that. – Gosi Oct 15 '19 at 15:49
  • 2
    Welcome to Stack Overflow! Questions asking us to suggest, find or recommend a book, tool, software library, plug-in, tutorial, explain a technique or provide any other off-site resource are off-topic for Stack Overflow Stack Overflow – Paulie_D Oct 15 '19 at 16:02
  • https://stackoverflow.com/questions/9466265/what-are-the-new-frames – Quentin Oct 15 '19 at 16:04
  • _"I am trying to avoid using – j08691 Oct 15 '19 at 16:05
  • @j08691 because if I iframe a multiple level dropdown menu the dropdowns won't come out of the iframe as if when you use them outside a iframe – Alban Lusitanae Oct 15 '19 at 16:07
  • @AlbanLusitanae how do you know this is the case in OPs question? I think it would be better if OP answered this versus a guess. – disinfor Oct 15 '19 at 16:08
  • 1
    @disinfor because he is mentioning navigation, and the problem with iframes in navigation and tabs, is that iframes' content cannot go out and overwrite other DIVs underneath it for instance, that is why I used a HTML+CSS3 and trying to call the code with a PHP Include – Alban Lusitanae Oct 15 '19 at 16:13
  • OP is talking about tab navigation to show content. _but instead of showing internal
    content when a tab is selected, I want it to display another HTML page I have created._
     – disinfor Oct 15 '19 at 16:14
  • 1
    @Gosi if you read the link inside you can find many answer not only with jquery – Germano Plebani Oct 15 '19 at 16:33
  • 1
    See also [Including external HTML file to another HTML file](https://stackoverflow.com/q/17148357/215552), [Include html in html through javascript](https://stackoverflow.com/q/17171916/215552), [How to include an HTML page into another HTML page without frame/iframe?](https://stackoverflow.com/q/676394/215552) – Heretic Monkey Oct 15 '19 at 16:49
  • @HereticMonkey Thank you for those links, they provide a lot of useful information that I required, and even answered a new question that I had just formed. – Kizzu Oct 15 '19 at 16:55

1 Answers1

2

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>
Gosi
  • 2,004
  • 3
  • 24
  • 36
  • It seems as this was what I needed, Thank you! – Kizzu Oct 15 '19 at 16:17
  • I don't think this is the desired solution because using an object tag to embed another html file has the same effect as using an iframe. – NineBerry Oct 15 '19 at 16:48
  • @NineBerry Is there another solution that does not include ``` – Kizzu Oct 15 '19 at 16:51