javascript - 如何在html中使用onload事件来调用js文件中的函数

Question

我有一个 html 文件，我需要从服务器加载一些项目，为此我使用 js 文件中的函数。现在，我可以不在 html 文件的标签中包含该代码，而是在 js 文件中包含该函数，并通过 HTML 中任何标签上的 onload 属性调用它(页面加载后立即)？

我的 HTML 页面是:

<script>
$.getScript(path + "js/jsfile.js");
</script>

<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.5.min.css">
<script src="jqueryMobile/jquery-1.11.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.5.min.js"></script>

<header data-role="header">
   <a href="#" class="ui-btn ui-icon-back ui-btn-icon-left"
    data-role="button" onclick="currentPage.back();">Back</a>
   <!--some header tags were here-->
</header>

<div data-role="content" style="padding: 15px" >
   <!--some button tags were here-->
</div>

一旦加载此页面，我就需要执行 getColor() 函数并将结果提取到 html 页面中。

我的 jsfile.js 页面是:

currentPage = {};

currentPage.init = function() {
  WL.Logger.debug("listofenvironments :: init");
};

currentPage.back = function(){
  WL.Logger.debug("Login :: back");
  pagesHistory.push(path + "pages/otherpage.html");
  $("#pagePort").load(path + "pages/" + "otherpage.html");
};

function getColor(){
  //some coding goes on here....
}

我尝试在我的 html 页面中的标签上使用 onload 事件，但它不起作用。虽然 currentPage.back() 函数工作正常。

Answer 1

在 jsfile.js 中添加以下行

$(document).ready(function(){
 getColor();//ready function will be executed after document elements are loaded.
});

希望这对您有用。