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

Question

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

• a.html 包含整个过程中常见的所有脚本和样式 该项目和<div>内容标签。

• b.html 只包含在 div 标签中加载所需的代码 .html 文件。

• 还有一些其他脚本和样式仅需要 b.html。

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

Answer 1

使用 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);
     });
}