[英]how to load content of one html file into another html file with all its scripts and styles?
i know that this question is asked many times here and i have read those answers but my question is bit longer than this. 我知道这个问题在这里被多次询问并且我已经阅读了这些答案,但我的问题比这更长。 suppose there are two files: a.html and b.html, now:
假设有两个文件:a.html和b.html,现在:
a.html contains all the scripts and styles that are common throughout the project and <div>
tag for content. a.html包含整个项目中常见的所有脚本和样式以及内容的
<div>
标记。
b.html contains only the codes required to load in the div tag of a.html file. b.html仅包含加载a.html文件的div标记所需的代码。
there are some other scripts and styles required only for b.html. 还有一些仅适用于b.html的其他脚本和样式。
so, how do i load that page specific js and css with the page's content into the div of a.html??? 那么,我如何将页面特定的js和css与页面的内容加载到a.html的div中? and how to remove them when i call another c.html file's content with its own js and css files??
以及当我用其自己的js和css文件调用另一个c.html文件的内容时如何删除它们? Any suggestions or hints would be appreciated.
任何建议或提示将不胜感激。 Thanks.
谢谢。
use Jquery Ajax to load page 2 into the div ( follow below example) 使用Jquery Ajax将第2页加载到div中(如下例所示)
page 1(HTML) 第1页(HTML)
<div id="loadepage2here" ></div>
<div id="loadepage3here" ></div>
page 1(js) 第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 to use only div for multiple page 编辑:询问如何只使用div为多页
page 1(HTML) 第1页(HTML)
<div id="loadepagehere" ></div>
<button onClick="loadPage('page1.html')" >Page 1</button >
<button onClick="loadPage('page2.html')" >Page 2</button >
page 1(js) 第1页(js)
loadPage(location)
{
$.get(location,function(data){
$("#loadepagehere").empty();
$("#loadepagehere").html(data);
});
}
You can use angular.js to achieve this. 您可以使用angular.js来实现此目的。 Below is the code snippet to achieve this.
下面是实现此目的的代码段。
var dynamicHTML = $('#divLoadHTML');
dynamicHTML.load('/Pages/Common/b.html')
$compile(dynamicHTML.contents())($scope);
divHTML is a div on a.html page. divHTML是a.html页面上的div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.