Question

我有一个主要的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＆＃34; mainpage-load＆＃34;中。但是当我使用jquery / ajax .load将内容加载到div中时，滑块的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中

提前感谢！

Answer 1

你试试这个。

jQuery的：

$("#y").load("home.html");

的javascript：

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

Answer 2

我写了一个简单的例子，希望它会对你有所帮助：您可以找到演示 here 和解决方案文件 here

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：

(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);

Javascript动态地将html加载到另一个html文件中

2 个答案: