Javascript函数在HTML页面中工作，但不能从外部.js文件中工作

我想将一些Javascript代码放在.js文件中，以便我可以从多个HTML页面调用它。问题是，如果将我的Javascript代码放在HTML页面中的脚本中，我的Javascript代码可以正常工作，但是当它放在外部的.js文件中时，它根本不起作用。我已经看了很多次这些问题，但仍然找不到错误。Javascript函数在HTML页面中工作，但不能从外部.js文件中工作

这里的HTML页面：

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/global.css" /> 
    <link rel="stylesheet" type="text/css" href="css/contacts.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src ="js/contactsModule.js"></script> 
    <title>Hall of Heroes</title> 
</head> 
<body onload = "contactsModule.getContacts();"> 



    <!-- Global Header Starts Here --> 
    <div class="header"> 
     <div class="cancel"> 
      <img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home --> 
     </div> 
     <h1>My Contacts</h1> 
    </div> 

    <div class="wrapper"> 
     <h3>A</h3> <!-- letter header goes here --> 

     <!-- Begin Contact Unit --> 
     <div class="feed"> 

     </div> 
     <!-- End Contact Unit --> 

    </div> 

    </body> 

    </html>

这里是.js文件：

var contactsModule = (function($){ 

     function getContacts() 
     { 
      dbContacts(); 
     } 

     function displayContacts(contactArray){ 
      window.alert('displayContacts now running!'); 
      var jsonObject = $.parseJSON(contactArray); 
      jsonObject.forEach(function (dat) { 
       //Begin Contact Unit 
       $('.feed') 
        .append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\ 
        </div><div class="feed-text"><p><span class="name_highlight">\ 
        ' + dat.firstName + ' ' + dat.lastName + '</span></p></div>'); 
       //End Contact Unit 
      }); 
     } 
     function dbContacts() { 
      var avatarUrl; 
      var firstName; 
      var lastName; 

      $.ajax({ 
       type: "GET", 
       url: "http://www.hallofheroesapp.com/php/contacts.php", 
       data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName}, 
       success: function (response) { 
        window.alert('AJAX ran successfully!'); 
        displayContacts(response); 
       }, 
       error: function(response){ 
        alert("Error:" + response); 
       } 
      }); 
     } 
}(jQuery));

谢谢您的帮助！

来源

2016-06-20 bzd91

你确定它在html文件中工作 - 我没有看到任何东西被返回到'contactsModule'变量 - 它在哪里得到它的值..？ –

是该函数的结尾应该是'}）（jQuery）;'？ – kirinthos

@kirinthos双向工作 –

你没有从你的IIFE返回任何东西。然后contactsModule将不包含任何东西，即等于undefined。除了全局定义的函数之外，只是定义函数并不会使这些函数成为某个对象的一部分。你必须给它们，或者将它们定义为对象文本的一部分

你的代码应该是这样的

var contactsModule = (function($){ 
    return { 
     getContacts: function() { 
      /* code */ 
     }, 
     displayContacts: function(contactArray){ 
      /* code */ 
     } 
     dbContacts function() { 
      /* code */ 
     } 
    }; 
}(jQuery));

来源

2016-06-20 21:28:08

如何使用

$(document).ready(function(){ 
    ///// your code here... 

});

来源

2016-06-20 21:25:47

...更改...

<body onload = "contactsModule.getContacts();">

...到...

<body>

...并使用添加事件处理程序jquery ...

(function($){ 

     function getContacts() 
     { 
      dbContacts(); 
     } 

     /* ... etc ... */ 

     // use jquery's onready handler 
     $(getContacts); 

}(jQuery));

来源

2016-06-20 21:26:20

$（getContacts）的用途是什么;靠近底部？ – bzd91

有同样的问题。当你研究谷歌时很容易。您的Js代码在DOM加载之前加载。这应该是另一种方式。所以，你必须使用这个

$(document).ready(function(){ 
    //only jQuery is recommended, global JavaScript functions outside! 
});

而且JavaScript的

document.addEventListener("DOMContentLoaded", function(event) { 
    //global function outside! 
});

只有这样，你可以肯定，你的jQuery找到你的元素之前你的DOM被加载。

来源

2016-06-20 22:37:51

当你说外面的全球功能时，你是什么意思？ – bzd91

这意味着你的全局函数应该在这个事件处理器之外。所以你可以调用函数，否则你不能。 –

Javascript函数在HTML页面中工作，但不能从外部.js文件中工作

回答

相关问题