简体   繁体   English

如何从另一个JavaScript调用JavaScript函数?

[英]how to call a javascript function from another javascript?

how can i call webService() from one in another script when they are in the same html file. 当它们位于相同的html文件中时,如何从另一个脚本中调用webService()。

first script that call method from second script 从第二个脚本调用方法的第一个脚本

<script type="text/javascript">
    function validate(){
       //validate body
       //how to call webService() here;
    }
</script>

second script 第二个剧本

<script type="text/javascript">
    function webService(){ 
       //WEB SERVICE FUNCTION BODY
    }
</script>

html : html:

<input type="button" value="Login" id="loginButton" onclick="validate();">

What you could do is use a global wrapper arround functions 您可以做的是使用全局包装器arround函数

 <html> <head> <script type="text/javascript"> function validate(){ alert("calling Script1") if(WRAPPER) WRAPPER.webService() } </script> </head> <body> <script type="text/javascript"> var WRAPPER = {} WRAPPER.webService = function(){ alert("Script1") } </script> <input type="button" value="Login" id="loginButton" onclick="validate();"> </body> </html> 

Although if the function is called directly from the head, the script at the body would not have loaded. 尽管如果直接从头调用该函数,则不会加载主体上的脚本。 You might need to wrap validate() around 您可能需要包装validate()

document.addEventListener('DOMContentLoaded', function() {
     validate()
  }, false);`

The same way you would normally call a javascript function. 与通常调用javascript函数的方式相同。 Benjamin Gruenbaum states you should declare the function webService before the validate function. Benjamin Gruenbaum声明您应该在validate函数之前声明函数webService。

<script type="text/javascript">
    function webService(){ 
       //WEB SERVICE FUNCTION BODY
    }
</script>

<script type="text/javascript">
    function validate(){
       //validate body
       webService();
    }
</script>

Usually you would put the code in two different js files and include the webService before the validate, which would make the one function available before the other. 通常,您会将代码放在两个不同的js文件中,并在验证之前包含webService,这将使一个函数在另一个函数之前可用。

<body>
    // other code
    <script src="scriptWithWebService.js"></script>
    <script src="scriptWithValidate.js"></script>
</body>

This has everything to do with scope . 这与范围有关 All Javascript elements are parsed in sequence. 所有Javascript元素均按顺序进行解析。 First the ones in the head and then the ones in the body. 首先是头部,然后是身体。 Functions are parsed first and aren't executed when they are defined. 函数首先被解析,并且在定义函数时不执行。 Declarations and function calls are executed afterwards. 声明和函数调用随后执行。 example: 例:

<script>
    runCode();
    function runCode()
    {
        alert(1);
    }
</script>

Will work, since the function runCode is defined first while parsing, however this example will fail: 将起作用,因为在解析时首先定义了功能runCode,但是此示例将失败:

<script>
    runCode();
</script>

<script>
    function runCode()
    {
        alert(1);
    }
</script>

This will fail, runCode is called before it's defined, since the second script block isn't parsed yet. 这将失败,因为尚未解析第二个脚本块,所以在定义runCode之前先调用它。 The following example will work: 以下示例将起作用:

<script>
    function runCode()
    {
       runUpdate()
    }
</script>

<script>
     function runUpdate()
     {
        alert(1);
     }
     runCode();
</script>

Even though runUpdate isn't defined when runCode is parsed it will not raise an undefined error since the content of the function isn't executed until called upon. 即使runUpdate时没有定义runCode被解析,因为不执行该功能的内容,直到呼吁它不会引发未定义的错误。

So at the end of the document loading, all the Javascript is parsed into a global scope. 因此,在文档加载结束时,所有Javascript都被解析为全局范围。 (Or simplified: it's put onto one big pile). (或简化:将它放在一大堆上)。

So when the document is loaded the code looks like this: 因此,在加载文档时,代码如下所示:

    function validate(){
       //validate body
       //how to call webService() here;
    }

    function webService(){ 
       //WEB SERVICE FUNCTION BODY
    }

and your input with click event can call upon validate() and validate can call upon webservice because there both defined. 您的点击事件输入可以调用validate()validate可以调用webservice因为两者均已定义。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM