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

【问题标题】：Javascript dynamically load html into another html fileJavascript 将 html 动态加载到另一个 html 文件中
【发布时间】：2025-12-25 20:25:13
【问题描述】：

我有一个主 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 中时，例如滑块的 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

提前致谢！

【问题讨论】：

在我写答案之前，您是否像我在您的主 html 页面中看到的那样调用脚本？脚本文件应该像这样调用
不只是一个例子^^

标签： javascript jquery ajax

【解决方案1】：

你试试这个。

jQuery:

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

javascript：

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

【讨论】：

你在@Karl Husten
如果在 home.html（或从 home.html 链接的 .js 文件中）定义了 JS 函数，这些函数是否可以从父 HTML 页面访问？

【解决方案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);

【讨论】：