Загрузить 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?

я могу скопировать все соответствующие строки (22-78), чтобы index2.html но как я должен заставить его работать вместе без использования 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, они делают то же самое, за исключением того, что .load не будет выполнять вызов ajax, если нет контейнер на первом месте. Вот пример метода загрузки

$("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-файла

ответ

Смежные вопросы