Aufrufen einer Javascript-Funktion in einer anderen JS-Datei

139

Ich wollte eine Funktion aufrufen, die in einer first.js-Datei in der second.js-Datei definiert ist. Beide Dateien werden in einer HTML-Datei wie folgt definiert:

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

Ich möchte Anruf fn1()in definiert first.jsin second.js. Aus meinen Suchanfragen ging hervor, ob first.jses möglich ist, wenn zuerst definiert wird, aber aus meinen Tests habe ich keine Möglichkeit gefunden, dies zu tun.

Hier ist mein Code:

second.js

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

first.js

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

javascript html m0j1
quelle

6

Nennen wir es so, es gibt nichts Besonderes, solange es sich um einen globalen Bereich handelt.

Epascarello

1

Wir alle machen das tausendmal am Tag. Wenn Sie dies nicht können, muss ein Problem mit Ihrer first.js vorliegen: Überprüfen Sie, ob sie überhaupt in Ihren Browser geladen wurde, und wenn ja, ob beim Parsen ein Syntaxfehler aufgetreten ist (beide werden in der Symbolleiste des Entwicklers angezeigt Ihres Browsers)

rplantiko

2

Das sollte funktionieren. Bitte bearbeiten Sie Ihre Frage, um uns mitzuteilen, was passiert, wenn Sie dies über die JavaScript-Konsole in Chrome oder Firefox / Firebug ausführen. (Ähm, und überprüfen Sie, ob Sie den Funktionsnamen richtig geschrieben haben.)

Bob Brown

2

Wenn es nicht funktioniert, machen Sie wahrscheinlich etwas falsch. Angesichts der Informationen in Ihrer Frage ist es jedoch unmöglich, dies zu wollen.

Felix Kling

2

Sollte der eigentliche Code.

Epascarello

163

Eine Funktion kann nur aufgerufen werden, wenn sie in derselben Datei definiert oder vor dem Versuch, sie aufzurufen, geladen wurde.

Eine Funktion kann nur aufgerufen werden, wenn sie sich im selben oder einem größeren Bereich befindet als derjenige, der versucht, sie aufzurufen.

Sie deklarieren die Funktion fn1in first.js und dann in secondfn1();

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>

Fernando Mendez
quelle

4

Was ist der beste Weg, um all dies in einer Produktionsanwendung zu verwalten?

Costa

17

das funktioniert bei mir nicht Gibt einen Fehler, dass fn1 () nicht definiert ist

Aayushi

10

Das funktioniert auch bei mir nicht. Gibt es eine Lösung, außer die Verwendung von jquery getscript, da dies auf eine schlechte Praxis hindeutet?

Vandolph Reyes

14

Warum ist dies die akzeptierte Antwort mit 82 Stimmen, wenn es nicht wirklich funktioniert?

Daniel

26

Wenn dies bei Ihnen nicht funktioniert, haben Sie wahrscheinlich die Funktion in etwas anderem definiert. Zum Beispiel hatte ich meine Funktion innerhalb eines $(document).ready(function() {...})Blocks und es funktionierte nicht. Ich habe es bewegt und es hat wie ein Zauber funktioniert.

Michael Ziluck

23

Sie können die Funktion zu einer globalen Variablen machen first.js , einen Blick auf den Abschluss werfen und ihn nicht document.readyaußerhalb platzieren

Sie können auch Ajax verwenden

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

Ebenso können Sie jquery getScript verwenden

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

Gildas.Tambo
quelle

7

Anfänger versuchen niemals so etwas zu tun. Dies sind schlechte Praktiken, die vermieden werden sollten. Solange beide von der Webseite referenziert werden, ja. Sie rufen die Funktionen einfach so auf, als ob sie sich in derselben JS-Datei befinden.

Ananda

Das einzige Problem ist, dass der Header aus irgendeinem Grund nicht enthalten ist.

Si8

21

1. JS:

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

2. JS:

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

Hoffe das hilft ... Happy Coding.

Akshay Tyagi
quelle

2

Ich denke du meinstjQuery.getScript()

Pmpr

16

Sie können die es6-Import-Export-Syntax verwenden. In Datei 1;

export function f1() {...}

Und dann in Datei 2;

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

Bitte beachten Sie, dass dies nur funktioniert, wenn Sie verwenden <script src="./file2.js" type="module">

Sie benötigen keine zwei Skript-Tags, wenn Sie dies auf diese Weise tun. Sie benötigen lediglich das Hauptskript und können dort alle anderen Inhalte importieren.

tm2josep
quelle

Mit Safari bekomme ichcross-origin script load denied by cross-origin resource sharing policy

Kakyo

Mit älteren Browsern können Sie die es6-Importsyntax möglicherweise nicht verwenden. Sie könnten Babel verwenden, wenn es Ihnen leichter fällt.

tm2josep

5

Es sollte so funktionieren:

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>

Ausgabe

Versuchen Sie dieses CodePen-Snippet: Link .

Consta Gorgan
quelle

4

Bitte beachten Sie, dass dies nur funktioniert, wenn die

<script>

Tags befinden sich im Körper und NICHT im Kopf.

So

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

=> unbekannte Funktion fn1 ()

Schlägt fehl und

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

funktioniert.

user213979
quelle

3

Verwenden Sie den Cache, wenn Ihr Server dies zulässt, um die Geschwindigkeit zu verbessern.

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
}

Und dann benutze es so:

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

Optional können Sie einen Prototyp erstellen, um ihn flexibler zu gestalten. Damit Sie die Datei nicht jedes Mal definieren müssen, wenn Sie eine Funktion aufrufen oder wenn Sie Code aus mehreren Dateien abrufen möchten.

Thielicious
quelle

3

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>

Afsar
quelle

2

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

phpnerd
quelle

Obwohl Ihr Code-Snippet das Problem möglicherweise löst, sollten Sie beschreiben, wozu Ihr Code dient (wie er das Problem löst). Darüber hinaus möchten Sie vielleicht stackoverflow.com/help/how-to-answer

Ahmad F

2

Deklarieren Sie die Funktion im globalen Bereich mit Fenster

first.js

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

second.js

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

schließen Sie so ein

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

taoufiqaitali
quelle

1

Das kommt eigentlich sehr spät, aber ich dachte, ich sollte teilen,

in index.html

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

in 1.js

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

in 2.js

fn1()

Ishaq Yusuf
quelle

Bitte lesen Sie den Kommentar des OP unter der Frage: "... Ich habe gerade [mit] einer Datei experimentiert, die sich an einem falschen Ort mit demselben Namen befindet ...".

traktor53

1

Verwenden Sie "var", während Sie eine Funktion erstellen. Dann können Sie von einer anderen Datei aus darauf zugreifen. Stellen Sie sicher, dass beide Dateien gut mit Ihrem Projekt verbunden sind und aufeinander zugreifen können.

file_1.js

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

Zugriff auf diese Funktion / Variable aus der Datei file_2.js

firstLetterUppercase("gobinda");

Ausgabe => Gobinda

hoffe das hilft jemandem, fröhliche Codierung !!!

iNandi
quelle

-1

// module.js
export function hello() {
  return "Hello";
}

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

Referenz von https://hype.codes/how-include-js-file-another-js-file

Min Thant
quelle

-2

Ich habe das gleiche Problem gehabt. Ich habe Funktionen innerhalb der jquery document ready- Funktion definiert.

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

Und diese Funktion xyz () habe ich in einer anderen Datei aufgerufen. Das funktioniert nicht :) Sie müssen die Funktion über dem Dokument bereit definieren .

Meldo
quelle

Aufrufen einer Javascript-Funktion in einer anderen JS-Datei

Antworten:

first.js

Second.js

index.html