从其他HTML文件加载HTML内容

Question

I have big HTML project and I want to divide one big HTML file into separate small html files. 我有一个大型HTML项目，我想将一个大型HTML文件分成单独的小型html文件。 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) 这是我的HTML文件的示例（由于原始html更大，所以这不是全部）

http://plnkr.co/edit/gwdAHfGIeac9WusLKMlV?p=preview 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 ? 在index2.html文件中，并将其加载到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... 我可以将所有相关行（22-78）复制到index2.html但是如何在不使用iFrame或框架的情况下使其协同工作...

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

Answer 1

Try using jQueries get function for that 尝试为此使用jQueries get函数

$.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 在这种情况下，数据将是您的html2页面内容

Here is full documentation https://api.jquery.com/jquery.get/ 这是完整的文档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. 实际上，通过阅读.get和.load函数之间的区别，我现在更喜欢使用.load，它们执行相同的操作，只是如果没有容器的话.load不会执行ajax调用。 Here is example of load method 这是加载方法的示例

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

从其他HTML文件加载HTML内容

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-12-22 10:20:21

从其他HTML文件加载HTML内容

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-12-22 10:20:21

解决方案1
2 已采纳 2016-12-22 10:20:21