在另一个js文件中调用JavaScript函数

2020/11/15 05:22 · javascript ·  · 0评论

我想调用一个在second.js文件的first.js文件中定义的函数。这两个文件都在HTML文件中定义,例如:

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

我想打电话给fn1()在定义first.jssecond.js根据我的搜索结果,答案first.js是首先定义是否可以,但是根据我的测试,我没有找到任何方法。

这是我的代码:

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

除非在同一文件中定义了该函数,或者在尝试调用该函数之前已加载了一个函数,否则无法调用该函数。

除非函数的范围与尝试调用该函数的范围相同或更大,否则不能调用该函数。

您先fn1在first.js中声明函数,然后在第二步就可以拥有fn1();

1.js:

function fn1 () {
    alert();
}

2.js:

fn1();

index.html:

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

第一个JS:

function fn(){
   alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}

第二个JS:

$.getscript("url or name of 1st Js File",function(){
fn();
});

希望对您有所帮助。

您可以将函数设为全局变量,first.js
并查看
闭包 ,而不要将其document.ready放在外部

你也可以使用ajax

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

您可以使用jquery getScript的相同方法

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

您可以考虑使用es6 import export语法。在文件1中;

export function f1() {...}

然后在文件2中;

import { f1 } from "./file1.js";
f1();

请注意,这仅在您使用时有效 <script src="./file2.js" type="module">

如果这样做,您将不需要两个脚本标签。您只需要主脚本,就可以将所有其他内容导入其中。

它应该像这样工作:

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
} 

index.html

<html>
  <head>
  </head>
  <body>
    <button onclick="clickedTheButton()">Click me</button>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" src="2.js"></script>
  </body>
 </html>

输出

输出。 按钮+结果

试试这个CodePen片段:link

请注意,仅当

<script>

标签在身体中,而不在头部。

所以

<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>

=>未知函数fn1()

失败并

<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>

作品。

如果服务器允许提高速度,请使用缓存。

var extern =(url)=> {           // load extern javascript
    let scr = $.extend({}, {
        dataType: 'script',
        cache: true,
        url: url
    });
    return $.ajax(scr);
}
function ext(file, func) {
    extern(file).done(func);    // calls a function from an extern javascript file
}

然后像这样使用它:

ext('somefile.js',()=>              
    myFunc(args)
);  

(可选)制作它的原型以使其更灵活。这样,如果您调用函数或要从多个文件中获取代码,则不必每次都定义文件。

first.js

function first() { alert("first"); }

Second.js

var imported = document.createElement("script");
imported.src = "other js/first.js";  //saved in "other js" folder
document.getElementsByTagName("head")[0].appendChild(imported);


function second() { alert("Second");}

index.html

 <HTML>
    <HEAD>
       <SCRIPT SRC="second.js"></SCRIPT>
    </HEAD>
    <BODY>
       <a href="javascript:second()">method in second js</a><br/>
       <a href="javascript:first()">method in firstjs ("included" by the first)</a>
    </BODY>
</HTML>
window.onload = function(){
    document.getElementById("btn").onclick = function(){
        fn1();
    }
   // this should work, It calls when all js files loaded, No matter what position you have written
});

在带有窗口的全局范围内声明函数

first.js

window.fn1 = function fn1() {
    alert("external fn clicked");
}

second.js

document.getElementById("btn").onclick = function() {
   fn1();
}

包括这样

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

这实际上来得很晚,但我想我应该分享一下,

在index.html中

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

在1.js中

fn1 = function() {
    alert("external fn clicked");
}

在2.js中

fn1()

在创建函数时使用“ var”,然后可以从另一个文件访问它。确保两个文件都已很好地连接到您的项目,并且可以互相访问。

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

访问此函数/可变形式的file_2.js文件

firstLetterUppercase("gobinda");

输出=> Gobinda

希望这对有人有帮助,编码愉快!

我的想法是让两个JavaScript通过DOM调用函数。

做到这一点的方法很简单。我们只需要定义隐藏的js_ipc html标签。被呼叫者从隐藏的js_ipc标签注册了click之后,呼叫者可以调度click事件来触发被呼叫者。并且将参数保存在要传递的事件中。

什么时候需要使用上述方式?

有时,这两个javascript代码集成起来非常复杂,并且那里有许多异步代码。不同的代码使用不同的框架,但是您仍然需要一种简单的方法将它们集成在一起。

因此,在这种情况下,做到这一点并不容易。

在我的项目的实现中,我遇到了这种情况,并且集成非常复杂。最后我发现我们可以让两个JavaScript通过DOM相互调用。

我在此git代码中演示了这种方式。您可以通过这种方式获得它。(或从https://github.com/milochen0418/javascript-ipc-demo阅读

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

在这里的任何地方,我尝试通过以下简单案例进行解释。我希望这种方式可以比以前没有任何JavaScript库支持由不同团队制作的两个javascript文件之间的通信更容易地集成两个不同的javascript代码。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

和代码css / style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js / caller.js

function caller_add_of_ipc(num1, num2) {
    var e = new Event("click");
    e.arguments = arguments;
    document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
    console.log("click to invoke caller of IPC");
    caller_add_of_ipc(33, 22);      
});

js / callee.js

document.getElementById("js_ipc").addEventListener('click', (e)=>{
    callee_add_of_ipc(e.arguments);
});    
function callee_add_of_ipc(arguments) {
    let num1 = arguments[0];
    let num2 = arguments[1];
    console.log("This is callee of IPC -- inner-communication process");
    console.log( "num1 + num2 = " + (num1 + num2));
}
// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

来自https://hype.codes/how-include-js-file-another-js-file的参考

我有同样的问题。我已经在jquery文档ready函数中定义了函数。

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

我已经在另一个文件中调用了此函数xyz()这不起作用:)您必须在文档上方定义函数ready

本文地址:http://javascript.askforanswer.com/zailingyigejswenjianzhongdiaoyongjavascripthanshu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!