如何将一个 html 文件的内容及其所有脚本和样式加载到另一个 html 文件中？答案

【问题标题】：how to load content of one html file into another html file with all its scripts and styles?如何将一个 html 文件的内容及其所有脚本和样式加载到另一个 html 文件中？
【发布时间】：2017-02-16 05:34:03
【问题描述】：

我知道这个问题在这里被问了很多次，我已经阅读了这些答案，但我的问题比这长一点。假设有两个文件：a.html 和 b.html，现在：

a.html 包含贯穿始终的所有脚本和样式项目和<div> 内容标签。
b.html 仅包含在 div 标签中加载所需的代码一个.html文件。
还有一些其他脚本和样式仅用于 b.html。

那么，我如何将页面特定的 js 和 css 与页面的内容一起加载到 a.html 的 div 中？以及当我用自己的 js 和 css 文件调用另一个 c.html 文件的内容时如何删除它们？任何建议或提示将不胜感激。谢谢。

【问题讨论】：

你试过用 HTML 框架做这个吗？

标签： javascript jquery html ajax

【解决方案1】：

您可以使用 angular.js 来实现这一点。下面是实现这个的代码sn-p。

    var dynamicHTML = $('#divLoadHTML');
    dynamicHTML.load('/Pages/Common/b.html')
    $compile(dynamicHTML.contents())($scope);

divHTML 是 a.html 页面上的一个 div。

【讨论】：

【解决方案2】：

使用 Jquery Ajax 将页面 2 加载到 div 中（如下示例）

第 1 页（HTML）

<div id="loadepage2here" ></div>
<div id="loadepage3here" ></div>

第 1 页（js）

$(document).ready(function()
{
  $.get('/locationOfPage2.html',function(data){
     $("#loadepage3here").empty();
     $("#loadepage2here").html(data);
   });
 $.get('/locationOfPage3.html',function(data){
     $("#loadepage2here").empty();
     $("#loadepage3here").html(data);
   });
});

编辑：如被问及如何仅将 div 用于多个页面

第 1 页（HTML）

<div id="loadepagehere" ></div>
<button onClick="loadPage('page1.html')" >Page 1</button >
<button  onClick="loadPage('page2.html')" >Page 2</button >

第 1 页（js）

loadPage(location)
{
    $.get(location,function(data){
       $("#loadepagehere").empty();
       $("#loadepagehere").html(data);
     });
}

【讨论】：

不会从该特定页面加载任何 javascript 或 css，除非它们是内联的，这是不好的做法。
是的，它会加载外部 javascript 和 css 也试试看
好的，但假设我有 100 页。我应该为此放置100个div吗？加js？？我不认为这是个好主意。
为什么要加载 100 页？如果需要，您可能需要重新考虑如何获取、合并和呈现数据。
@Terry 我不想同时加载 100 页。我要问的是，如果单击链接我正在加载一个页面，然后单击另一个链接我想加载另一个页面但在同一个 div 中。我不想为此放置另一个 div。