Question

我有一个很棒的HTML项目，我想将一个大的HTML文件分成单独的小html文件。有没有好办法呢？

这是我的HTML文件的一个例子（这不是全部，因为原来的html要大得多）

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>

例如，如何让部分从开始并转到文件中的index2.html并将其加载到index.html内？

我可以将所有相关的行（22-78）复制到index2.html但是如何在不使用 iFrame或框架的情况下将其合并到一起...

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

Answer 1

尝试使用jQueries get函数

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

本案例中的数据将是您的html2页面内容

以下是完整文档https://api.jquery.com/jquery.get/

事实上，通过读取.get和.load函数之间的差异，我现在更喜欢使用.load，它们会做同样的事情，除非.load在第一个地方没有容器时不会执行ajax调用。以下是加载方法的示例

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

从其他html文件加载html内容

1 个答案: