Question

我有一个header.html和header.js文件，因为我想通过我的网页使用相同的标题。在header.js文件中，在窗口加载时我想要它到console.log（“加载头文件”）。我的主页也有index.html和index.js文件。在index.js中，在窗口加载时我想要它到console.log（“索引文件已加载”）

我在index.html文件中调用了header.html，以便导入主页的标题。这很好用。基于js文件，控制台输出应该

加载头文件

已加载索引文件

我遇到的问题是似乎header.js和index.js无法同时工作只有最后引用的文件在控制台中输出

例如此格式

 <script src="js/header.js"></script>
 <script src="js/index.js"></script>

将输出

已加载索引文件

和这个

  <script src="js/index.js"></script>
  <script src="js/header.js"></script>

将输出

加载头文件

我使用代码在index.html中导入header.html

  <head>
    <div data-include="header"></div>

  </head>


  <body>
       <script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

</body>

这是两个js文件的内容

   function retrieveInfo(data) {

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        var userId = firebase.auth().currentUser.uid;
        return firebase.database().ref('/Sellers/' + userId).once('value').then(function(snapshot) {

            console.log(userId)
            console.log("index file loaded")

        });
    }
  })
  }

我做错了什么，如何修复它以同时调用两个js文件？

Answer 1

您正在以错误的方式执行此操作，.load()用于加载HTML内容。您应该使用.getScript()来加载j并执行它。

根据文件：

<强> .load（）

从服务器加载数据并将返回的HTML放入匹配的元素中。

<强> .getScript（）

使用GET HTTP请求从服务器加载JavaScript文件，然后执行它。

以下是使用getScript的示例：

allCourses.size()

在你的情况下，它将是：

$.ajax({
    url: url,
    dataType: "script",
    success: function() {
         alert("script loaded");
    }
});

在html文件中导入头文件无法正常工作

1 个答案: