Javascript将html动态加载到另一个html文件中
[英]Javascript dynamically load html into another html file
问题描述
I have one main html file which looks like this:
我有一个主要的 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>
i want to dynamically load content into the div "mainpage-load".我想将内容动态加载到 div“mainpage-load”中。 but when i load the content with jquery/ajax .load into the div, the javascript file for a slider for example is not effecting the new content.但是当我使用 jquery/ajax .load 将内容加载到 div 中时，例如滑块的 javascript 文件不会影响新内容。
app.js to load content: 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" );
})
});
2nd html file (pages/main.html):第二个 html 文件（pages/main.html）：
<div class="new content">
new content here
</div>
i tried putting app.js and jquery into the but still not working or putting the slider.js in the pages/main.html我尝试将 app.js 和 jquery 放入但仍然无法正常工作或将 slider.js 放入 pages/main.html
thanks in advance !提前致谢 ！
2 个解决方案
解决方案1
4 2016-12-18 10:28:56
You just try this.你试试这个。
jQuery: jQuery：
$("#y").load("home.html");
javascript: javascript:
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
解决方案2
1 2016-12-18 12:50:59
I wrote a simple example and hope it will help you: you can find a demo here and the solution files here我写了一个简单的例子，希望它会帮助你：你可以找到一个演示在这里和解决方案文件在这里
html part : html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nav">
</div>
<div id="mainpage-load">
<div id="loading" >
<img src="./img/loading-white.gif">
</div>
</div>
<button id="loadcontent">Load Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScript app.js : JavaScript app.js ：
(function($){
$(document).ready(function(){
$(document).on("click", "#loadcontent", function(){
$(document).load( "pages/main.html", function(resp, status, xhr){
$("#loading").show();
if (status == "success" && xhr.status == 200)
$("#mainpage-load").prepend(resp);
else{
console.log("something wrong happend!");
}
$("#loading").hide();
});
});
});
})(window.jQuery);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.