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

Answer 1

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]);

Load html content from other html file

Question

1 answers

solution1
2 ACCPTED 2016-12-22 10:20:21

Load html content from other html file

Question

1 answers

solution1 2 ACCPTED 2016-12-22 10:20:21

solution1
2 ACCPTED 2016-12-22 10:20:21