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.
});

希望这对你有用。

Answer 2

亲自阅读一些教程。这些是您不必查找stackoverflow的基本问题。但是找到答案

<body onload="myFunc()">
</body>

//in your jsfile
function myFunc() {
    //your code
}

如果你想在加载dom之后调用函数并且不需要加载资源，那么

onLoad会在你的dom和资源加载后调用，使用jquery ready函数

$(document).ready(function(){
  //your code
});

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

2 个答案: