我有一个主要的 html 文件，如下所示:
<head>
css here
</head>
<body>
<div class="nav">
....
</div>
<div id="mainpage-load">
<div id="loading">
<img src="./img/loading-white.gif">
</div>
</div>
<script> jquery </script>
<script> slider.js </script>
<script> ... </script>
<script> APP.JS </script>
我想动态地将内容加载到div“mainpage-load”中。但是当我使用 jquery/ajax .load 将内容加载到 div 中时， slider 的 javascript 文件不会影响新内容。
app.js 加载内容:
$(function(){
var $loading = $('#loading').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
$('#load-it').on('click', function(e){
e.preventDefault();
$( "#mainpage-load" ).load( "pages/main.html" );
})
});
第二个 html 文件(pages/main.html):
<div class="new content">
new content here
</div>
我尝试将app.js和jquery放入但仍然不起作用或将slider.js放入pages/main.html
提前致谢!
最佳答案
你试试这个。
jQuery:
$("#y").load("home.html");
JavaScript:
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
关于Javascript动态加载html到另一个html文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41207345/