Question

我使用codepen.io创建项目，在该项目中，我创建了两个html页面。第一个叫做“header.html”，第二个叫做“index.html”。我正在使用“w3-include-html”将我的header.html文件包含在我的index.html文件中。 header.html文件使用外部javascript文件将日期时间返回到我创建的名为“time”的特定ID。问题是当我在我的index.html页面时，显示标题并运行代码但是document.getElementById函数无法从index.html中使用的外部html页面中找到id。

这是我的代码：

header.html中

<html>
   <head>
       <script src="scripts/userInfo.js"></script>
   </head>
   <body>
      <p id ="userName">username</p>
      <p id ="time"></p>
      <p id ="logcount">timeCounter</p>   
      <script>
           dateTime();       
      </script>
   </body>
</html>

的index.html

<html>
   <head>
     <script src="https://www.w3schools.com/lib/w3.js"></script> <-used to 
     enable the use of the w3-include-html 
   </head>
   <body>
     <div w3-include-html="header.html"></div> <- refers to my html file and 
       places the assets on the page 

     <script>
        w3.includeHTML(); <--to include the html file
     </script>
     <script src="scripts/userInfo.js"></script> <-- reference to javascript 
                                              file being used by header.html
   </body>
</html>

userInfo.js

var sec =0;
var minute = 0;
var hour = 0;

var timeOutput;

function dateTime(){

  var date = new Date();

  var day = date.toDateString();

  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();


  try{
    document.getElementById("time").innerHTML = day + " " + hours + ":" + 
    minutes;
  }catch(error){
     alert(error); <- when run on the index.html page I get an error saying 
     that the id "time" could not be found. This does work when running just 
     on the header.html page.
  }

  setTimeout(dateTime,1000);
  }

任何帮助都将不胜感激，谢谢。

Answer 1

这个W3 Schools脚本不是标准，在查看其源代码时，它依赖于XHLHttpRequest对象（AJAX）。只有在通过HTTP或HTTPS从服务器请求代码时，AJAX请求才有效，因此请确保在测试此代码时，您正在服务器上运行它。

此外，即使您正常工作，包含的文件也不应该是整个HTML文档。它应该只是一个您打算插入更大文件的片段。由于您尝试将header.html文件注入div index.html，因此您应该只注入在div内有效的代码，因此请更改{{1}对此：

header.html

HTML - w3-include-html阅读javascript问题

1 个答案: