Load html content from other html file

Question

I have big HTML project and I want to divide one big HTML file into separate small html files. Is there a good way to do it?

This is an example of my HTML file (this is not all since the original html is much bigger)

http://plnkr.co/edit/gwdAHfGIeac9WusLKMlV?p=preview

<!DOCTYPE html>
<html>
<head>
  <title>toolbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="toggle-button">
  <div class="wrapper">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-middle"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </div>


</div>
  <!-- remove from here!!!! -->
<nav id="navi" class="navbar-inverse menuBar">
  <div class="container-fluid back">
    <div class="navbar-header">
      <a class="navbar-brand glyphicon glyphicon-plus" title="Home"  href="#"></a>
    </div>
    <ul class="nav navbar-nav">
      <li id="dropdown1" title="Dropdown one" class="dropdown keep-open">
        <a id="qlabel" class="dropdown-toggle glyphicon glyphicon-ok" data-toggle="dropdown" href="#">
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
        <div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" title="Third group" >
        Collapsible Group 3</a>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">

      </div>
    </div>
  </div>
</div>
        </ul>
      </li>

      <li><a href="#" id="list1" class="glyphicon glyphicon-flag" title="List 1"  onclick="list1(this)"></a></li>

    </ul>


     <ul class="nav navbar-nav navbar-right">


<li class="dropdown">

       <a class="dropdown-toggle glyphicon glyphicon-time" title="Notifications" data-toggle="dropdown" href="#" >
         <span class="badge badge-print">2</span><span class="caret"></span>
        </a>
        <ul class="dropdown-menu notif" style="padding:20%;">
          <li>Hello</li>
        </ul>
      </li>
 <li class="dropdown">
        <a class="dropdown-toggle glyphicon glyphicon-user" title="Languages" data-toggle="dropdown" href="#">
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#" onclick="language(this)">English</a></li>
        </ul>
      </li>
      <li><a href="#" onclick="logout()" title="Logout"><span class="glyphicon glyphicon-log-in"></span> </a></li>
    </ul>
  </div>
</nav>
<p style="margin-left:25%; margin-top:5%;"><iframe src="http://stackextance.com"  frameborder="0" width="660px" height="270px" marginheight="0" marginwidth="0" scrolling="No"><p>See the World Forests Clock at <a href="http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm">http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm</a>.</p></iframe></p>
  <!-- until here!!!! -->
<script src="app.js"></script>
</body>
</html>

For example, how can I have the part starting at  and going to  in index2.html file and load it inside index.html?

I can copy all the relevant lines(22-78) to index2.html but how should I make it work together without using iFrame or frame...

https://www.tutorialspoint.com/html/html_frames.htm

Possible duplicate of [Include another HTML file in a HTML file](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — , Dec 22 '16 at 10:16
@Johanness - The question you refer is from 4 years ago , you dont think that there newer/better techniques? — John Jerrby, Dec 22 '16 at 10:19

Raimonds · Accepted Answer · 2017-01-10T09:37:34.580

2

Try using jQueries get function for that

$.get( "index2.html", function( data ) {
  $( ".result" ).html( data );
    //code to insert data into desirable container
});

Data in this case will be your html2 page content

Here is full documentation https://api.jquery.com/jquery.get/

In fact by reading difference between .get and .load functions i'd now prefer using .load, they do the same thing except that .load won't perform ajax call if there is no container in first place. Here is example of load method

$("your container selector").load("desired data (index2.html)"[, optional callback function when data is loaded]);

edited Jan 10 '17 at 09:37

answered Dec 22 '16 at 10:20

Raimonds

537
4
21

Thanks I've tried your suggestion and its not working http://plnkr.co/edit/XMBKvGEs1Fb45simNaNK?p=preview – John Jerrby Dec 22 '16 at 10:25
you are using wrong selector, you have id="result" but in you selector you are refering to class $(".result"), change your selector to $("#result") – Raimonds Dec 22 '16 at 10:31

Load html content from other html file

1 Answers1