他のhtmlファイルからhtmlコンテンツをロード

私は大きなHTMLプロジェクトを持っています。大きなHTMLファイルを別々の小さな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のファイルをロードしますか？

私はindex2.htmlに関連するすべての行（22から78）をコピーすることができますが、どのように私はそれがのiFrameやフレームを使用せずに一緒に動作させる必要があります...

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

出典

2016-12-22 John Jerrby

[HTMLファイル内の別のHTMLファイルを含める]（http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-の可能な重複がありますhtmlファイル） – Johanness

@Johanness - あなたが参照する質問は4年前からあります。新しい/より良い技術があるとは思わないでしょうか？ –

はjQueriesを使用してみてください機能を取得この場合、その

$.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を使うほうが好きですが、同じことをします。最初の場所にコンテナ。ここでは、負荷方法の一例

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

出典

2016-12-22 10:20:21 Raimonds

ありがとう私はあなたの提案を試して、動作していないhttp://plnkr.co/edit/XMBKvGEs1Fb45simNaNK?p=preview –

http://plnkr.co/edit/XMBKvGEs1Fb45simNaNK?p=preview –

間違ったセレクタを使用していますが、あなたはid = "result"を持っていますが、セレクタで$（ "。result"）クラスを参照しています。セレクタを$（ "＃result"）に変更してください – Raimonds

他のhtmlファイルからhtmlコンテンツをロード

答えて

関連する問題