从其他HTML文件加载HTML内容

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 个解决方案

解决方案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