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

时间:2016-10-07 09:06:27

标签: javascript jquery html ajax

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

  • a.html包含所有常用的脚本和样式 项目和内容的<div>标记。

  • b.html仅包含加载div标签所需的代码 a.html文件。

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可以使用angular.js来实现此目的。以下是实现此目的的代码段。

Repeat

divHTML是a.html页面上的div。