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

how to load content of one html file into another html file with all its scripts and styles?

本文关键字：文件 HTML 另一个 样式 脚本 加载 一个      更新时间：2023-09-26

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

  • .html包含了所有的脚本和样式项目和<div>标签为内容

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

  • 有一些其他的脚本和样式只需要b.html .

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

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

Edit: as asked how only usediv for multiple page

第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);
     });
}

你可以使用angular.js来实现这一点。下面是实现这一点的代码片段:

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

divHTML是a.html页面上的div。

相关文章：